Set width and height in a responsive way
I want this images to have the same width and height. How would you guys do that? Right now I'm using max-width 100% for the image and the width is ok. what about the height?
the html code above
<div class="hero__photos">
<div>
<img src="<?php echo get_template_directory_uri() ?>/resources/assets/heading_img.jpg" alt="" />
</div>
<div>
<img src="<?php echo get_template_directory_uri() ?>/resources/assets/heading_img3.jpg" alt="" />
</div>
</div>
3 Replies
aspect-ratio: 1/1
Put that on the img tag
Also may want object-fit: cover on therethat really works, will search on why that works XD thanks!
Haha no worries. It's a newer css tool. Allows you to choose the image proportions without knowing the exact height and width. Object-fit: cover just makes it so that it zooms in to make the image fill all the available space