居中图像在一个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
答
图像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>
答
我设置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>
非常感谢。我还有一个问题......可以像[this]一样设置倾斜div（https://i.stack.imgur.com/U2MVD.jpg） – Spolli
尝试['transform：skew']（https：// developer。 mozilla.org/en-US/docs/Web/CSS/transform-function/skew）。 –