为什么我不能将图像样式高度设置为100%的高度与Div容器一样?
当我尝试测试代码时,它将显示为这样。
https://i.imgur.com/q1mgp0z.png
我想显示这样的图像。
https://i.stack.imgur.com/ot6ju.png
使用类名称img_look
样式height: 100%;
我该怎么做?
.li_look{
padding: 0px;
margin: 0;
position: relative;
width: 25%;
border-right: 3px solid #fff;
margin-right: -3px;
z-index: 11;
float: left;
list-style: none;
color: #333;
font-size: 19px;
background: #fff;
}
.div_1{
float: none;
margin: 0;
width: 100%;
height: 197.207px;
display: block;
position: relative;
}
.a_tag{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.div_2{
transform: translateX(-50%);
left: 50%;
top: 0;
background-color: transparent;
display: block;
position: absolute;
}
.img_look{
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<ul>
<li class="li_look">
<div class="div_1">
<a href="#" class="a_tag">
<div class="div_2">
<img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look">
</div>
</a>
</div>
</li>
</ul>
问题在于IMG标签的父容器。由于没有定义的高度,因此您不能使用与父容器相关的100%。定义一个高度,如下所示。DIV_2。它会很好。
.li_look{
padding: 0px;
margin: 0;
position: relative;
width: 25%;
border-right: 3px solid #fff;
margin-right: -3px;
z-index: 11;
float: left;
list-style: none;
color: #333;
font-size: 19px;
background: #fff;
}
.div_1{
float: none;
margin: 0;
width: 100%;
height: 197.207px;
display: block;
position: relative;
}
.a_tag{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width:100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.div_2{
transform: translateX(-50%);
left: 50%;
top: 0;
background-color: transparent;
display: block;
position: absolute;
height:100%;
}
.img_look{
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<ul>
<li class="li_look">
<div class="div_1">
<a href="#" class="a_tag">
<div class="div_2">
<img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look">
</div>
</a>
</div>
</li>
</ul>
您的图像大小与您的DIV相同,但是您的DIV与固定它的a
标签的大小相同。由于您的a
具有overflow:hidden;
,您看不到您的DIV实际上更大。
您不能将height:100%;
或width:100%;
添加到您的DIV中,而是保持相同的图像尺寸。
另外:这感觉真的很不错,你不这么认为吗?
height: 197.207px;
我认为您需要此https://jsfiddle.net/wqhch5et/查看全屏模式。您需要更改位置:绝对;位置:固定;在Div_2中
.li_look{
padding: 0px;
margin: 0;
position: relative;
width: 25%;
border-right: 3px solid #fff;
margin-right: -3px;
z-index: 11;
float: left;
list-style: none;
color: #333;
font-size: 19px;
background: #fff;
}
.div_1{
float: none;
margin: 0;
width: 100%;
height: 197.207px;
display: block;
position: relative;
}
.a_tag{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
display: block;
cursor: pointer;
}
.div_2{
transform: translateX(-50%);
left: 50%;
top: 0;
background-color: transparent;
display: block;
position: fixed;
}
.img_look{
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
max-width: unset;
}
<ul>
<li class="li_look">
<div class="div_1">
<a href="#" class="a_tag">
<div class="div_2">
<img src="https://i2.wp.com/www.thisblogrules.com/wp-content/uploads/2010/02/man-and-bear-bath.jpg?resize=550%2C356" class="img_look">
</div>
</a>
</div>
</li>
</ul>