居中圖像在一個div沒有裁剪圖像和隱藏溢出

我必須設置每個div中心的每個圖像，並隱藏溢出，而不裁剪圖像。我試着用居中圖像在一個div沒有裁剪圖像和隱藏溢出

margin: auto 0;
background-position: center;

但沒有任何工程。

.main { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.column { 
 
    width: 16.7% !important; 
 
    max-width: 16.4% !important; 
 
    height: 100%; 
 
    display: inline-block; 
 
    margin-right: -1px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.column .picture:before { 
 
    height: 100%; 
 
    transition: all .7s; 
 
    display: none; 
 
} 
 

 
.picture { 
 
\t background-position: center; 
 
    height: 90%; 
 
    overflow: hidden; 
 
    transition: all .5s; 
 
} 
 

 
.column:hover .picture { 
 
    filter: blur(1.2px); 
 
    overflow: hidden; 
 
\t height: 100%; 
 
    transition: all .5s; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: translateZ(1px) scale(1.1, 1.1); 
 
} 
 

 
.column:hover .picture:before { 
 
    display: block; 
 
    transition: all .7s; 
 
} 
 

 
.label{ 
 
    color: #E7E7E7; 
 
    font-size: 2em !important; 
 
    font-weight: 900; 
 
    line-height: 60px; 
 
    text-shadow: 3px 3px #953163; 
 
    text-align: center; 
 
    text-decoration: none; 
 
}

<div class="main"> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link1.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 1</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link2.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 2</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link3.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 3</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
</div>

enter code here

來源

2017-06-18 Spolli

圖像0轉換到左，左邊距設置爲50%。

爲了防止從懸停取出translateX變換，更新爲：

transform: translateX(-50%) translateZ(1px) scale(1.1, 1.1);

.main { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.column { 
 
    width: 16.7% !important; 
 
    max-width: 16.4% !important; 
 
    height: 100%; 
 
    display: inline-block; 
 
    margin-right: -1px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.column .picture:before { 
 
    height: 100%; 
 
    transition: all .7s; 
 
    display: none; 
 
} 
 

 
.picture { 
 
    display: inline-block; 
 
    height: 90%; 
 
    transition: all .5s; 
 
    transform: translateX(-50%); 
 
    margin-left: 50%; 
 
} 
 

 
.column:hover .picture { 
 
    filter: blur(1.2px); 
 
    overflow: hidden; 
 
    height: 100%; 
 
    transition: all .5s; 
 
    -webkit-backface-visibility: hidden; 
 
    transform: translateX(-50%) translateZ(1px) scale(1.1, 1.1); 
 
} 
 

 
.column:hover .picture:before { 
 
    display: block; 
 
    transition: all .7s; 
 
} 
 

 
.label { 
 
    color: #E7E7E7; 
 
    font-size: 2em !important; 
 
    font-weight: 900; 
 
    line-height: 60px; 
 
    text-shadow: 3px 3px #953163; 
 
    text-align: center; 
 
    text-decoration: none; 
 
}

<div class="main"> 
 
    <div class="column"> 
 
    <a href="http://link1.com/"> 
 
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
     <div class="label"> Link 1</div> 
 
    </a> 
 
    </div> 
 
    <div class="column"> 
 
    <a href="http://link2.com/"> 
 
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
     <div class="label"> Link 2</div> 
 
    </a> 
 
    </div> 
 
    <div class="column"> 
 
    <a href="http://link3.com/"> 
 
     <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
     <div class="label"> Link 3</div> 
 
    </a> 
 
    </div> 
 
</div>

來源

2017-06-18 21:04:10

非常感謝。我還有一個問題......可以像[this]一樣設置傾斜div（https://i.stack.imgur.com/U2MVD.jpg） – Spolli

嘗試['transform：skew']（https：// developer。 mozilla.org/en-US/docs/Web/CSS/transform-function/skew）。 –

我設置max-width到100%和height到auto。希望這是你所追求的。

.main { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 

 
.column { 
 
    width: 16.7% !important; 
 
    max-width: 16.4% !important; 
 
    height: 100%; 
 
    display: inline-block; 
 
    margin-right: -1px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.column .picture:before { 
 
    height: 100%; 
 
    transition: all .7s; 
 
    display: none; 
 
} 
 

 
.picture { 
 
\t background-position: center; 
 
    height: auto; 
 
    overflow: hidden; 
 
    transition: all .5s; 
 
    max-width: 100%; 
 
} 
 

 
.column:hover .picture { 
 
    filter: blur(1.2px); 
 
    overflow: hidden; 
 
\t height: auto; 
 
    transition: all .5s; 
 
    -webkit-backface-visibility: hidden; 
 
    -webkit-transform: translateZ(1px) scale(1.1, 1.1); 
 
} 
 

 
.column:hover .picture:before { 
 
    display: block; 
 
    transition: all .7s; 
 
} 
 

 
.label{ 
 
    color: #E7E7E7; 
 
    font-size: 2em !important; 
 
    font-weight: 900; 
 
    line-height: 60px; 
 
    text-shadow: 3px 3px #953163; 
 
    text-align: center; 
 
    text-decoration: none; 
 
}

<div class="main"> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link1.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 1</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link2.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 2</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t \t <div class="column"> 
 
\t \t \t \t <a href="http://link3.com/"> 
 
\t \t \t \t \t <img class="picture" src="https://i.imgur.com/u5vuO6M.jpg" alt=""> 
 
\t \t \t \t \t <div class="label"> Link 3</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
</div>

來源

2017-06-18 21:10:40 Gerard

居中圖像在一個div沒有裁剪圖像和隱藏溢出

回答

相關問題