以ul为单位设置Img的纵横比

Question

我正在尝试在ul中设置此图像的纵横比。它目前显示的高度比我想要的要大得多。我尝试了很多方法，包括用另一个div包围它，并将padding-top: 56.25%;添加到div中，但都不起作用。如有任何帮助，我们将不胜感激。

<div class="col-md">
<ul class="one">
<a href="{% url 'link' %}">
<li class="two">
<img class="three" src="{% static 'home/img.jpg' %}">
<div class="title">
<div class="title__tag">
<p class='text'>Book Your Free Consultation Now</p>
</div>
</div>
</li>
</a>
</ul>
</div>

.one{
width: 100%;
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
height: auto;
}
.two {
position: relative;
overflow: hidden;
float: left;
padding: 0px;
width: 100%;
margin: 5px;
border-radius: 6px;
}
.three {
margin: 0px;
padding: 0px;
float: left;
z-index: -1;
}

谢谢。

Answer 1

首先要注意的一件事是，您应该将<a>移动到<li>中。有效的HTML规定只有<li>元素应该直接跟在<ul>后面。

有几种不同的方法可以实现你所描述的。一种快速而简单的方法是利用backgroundCSS属性的易用性，比如在这个代码笔中：https://codepen.io/barneychampaign/pen/mdEvMPd

看看这是否会产生你想要的效果。