我必须将每个图像设置在每个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 {
background-position: center;
height: 90%;
overflow: hidden;
transition: all .5s;
}
.column:hover .picture {
filter: blur(1.2px);
overflow: hidden;
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">
<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>
enter code here
答案 0 :(得分:0)
将图片-50%
翻译到左侧,并将左边距设为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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
我将function my_filter_register_post_type_args( $args, $post_type ) {
// We only want to edit the 'CUSTOM_POST_NAME' post type - if that's not it, then bail
if ( 'CUSTOM_POST_NAME' != $post_type ) {
return $args;
}
$args['rewrite'] = false;
return $args;
}
add_filter( 'register_post_type_args', 'my_filter_register_post_type_args', 10, 2 );
设为max-width
,将100%
设为height
。希望这是你追求的目标。
auto
&#13;
.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 {
background-position: center;
height: auto;
overflow: hidden;
transition: all .5s;
max-width: 100%;
}
.column:hover .picture {
filter: blur(1.2px);
overflow: hidden;
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;
}
&#13;