居中图像在一个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没有裁剪图像和隐藏溢出

回答

相关问题