I'm having some trouble adjusting the aspect ratio of an image within a ul. Currently, the image is displaying too large in terms of height and I've tried various solutions, such as wrapping it in another div and applying padding-top: 56.25%; to the div, but nothing seems to be working. Any guidance on this issue would be greatly appreciated.
<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;
}
Any assistance you can provide would be sincerely appreciated.