Problem maintaining the same image size in web page

Question

First of all, I wanted to say that I am very new to web programming.

The problem is that I am trying to create a list of properties for sale. The list should consist of a picture,title, description and a price.

Here is the page:

Here is my html code:

</div>

            <div class="gallery">
                <a target="_blank" href="T.jpg">
                    <img src="T.jpg" alt="Forest" width="600" height="400">
                </a>
                <h5 class="offer-item-title"><a title="детайли" href="http://www.kalchev.com/estate/offer/6309">Къща, Варна
        обл., с.Болярци</a></h5>
                <div class="offer-item-title">Триетажна къща с красива панорама към Кране Триетажна къща с красива панорама към Кране</div>
                <h4 class="offer-item-price">110 000&nbsp;€</h4>
            </div>

            <div class="gallery">
                <a target="_blank" href="ASD.jpeg">
                    <img src="ASD.jpeg" alt="Northern Lights" width="600" height="400">
                </a>
                <h5 class="offer-item-title"><a title="детайли" href="http://www.kalchev.com/estate/offer/6309">Къща, Варна
        обл., с.Болярци</a></h5>
                <div class="offer-item-title">Триетажна къща с красива панорама към Кране Триетажна къща с красива панорама към Кране</div>
                <h4 class="offer-item-price">110 000&nbsp;€</h4>
            </div>

So the size and type of both pictures is different ( ASD.jpeg and T.jpg ). Is there anyway to create a constant image size, no matter the difference in their sizes.

Answer 1

You can just use a normal div with background-image property set. Something like this:

Instead of

<img src="T.jpg" alt="Forest" width="600" height="400">

Do this

<div id="myImageOne">

And for your css:

#myImageOne {
    width: 300px;                       /*Width for your image*/
    height: 300px;                      /*Height for your image*/
    background-image: url('T.jpg');     /*Your image url*/
    background-position: center center; /*Center the image in the div*/
    background-size: cover;             /*So that the whole div is filled*/
    background-repeat: no-repeat;       /*Basically useless, due to background-size: cover*/
}

This is easier to handle most of the time. I personally ran In multiple issues with HTML img tag, when it comes to styling, animations and so on.

Also, this solution will handle different box sizes, image sizes, ... on its own. No need to change anything for a different image resolution, or resizing the images by hand!

If you want more information on background-size , check this site out .

Answer 2

I would remove the height and width attributes from your <img> tag and use CSS to set the height and width of the images. I throw together a quick example for you based off the code you provided.

 .gallery { display: inline-block; width: 120px; padding: 5px; border: 1px solid grey; margin: 10px; } .gallery img { width: 120px; height: 80px; }

 <div class="gallery"> <a target="_blank" href="T.jpg"> <img src="https://pmcvariety.files.wordpress.com/2018/07/bradybunchhouse_sc11.jpg?w=1000&h=563&crop=1" alt="Forest"> </a> <h5 class="offer-item-title"><a title="детайли" href="http://www.kalchev.com/estate/offer/6309">Къща, Варна обл., с.Болярци</a></h5> <div class="offer-item-title">Триетажна къща с красива панорама към Кране Триетажна къща с красива панорама към Кране</div> <h4 class="offer-item-price">110 000&nbsp;€</h4> </div> <div class="gallery"> <a target="_blank" href="ASD.jpeg"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--bIV3xkEm--/c_scale,f_auto,fl_progressive,q_80,w_800/jsprifdd1gmfy7e7nola.jpg" alt="Northern Lights"> </a> <h5 class="offer-item-title"><a title="детайли" href="http://www.kalchev.com/estate/offer/6309">Къща, Варна обл., с.Болярци</a></h5> <div class="offer-item-title">Триетажна къща с красива панорама към Кране Триетажна къща с красива панорама към Кране</div> <h4 class="offer-item-price">110 000&nbsp;€</h4> </div>

The part to focus on is this CSS rule:

.gallery img {
  width: 120px;
  height: 80px;
}

Answer 3

If you're not required to support Internet Explorer, you could use object-fit .

Here is an example using two images of drastically different size. They are resized to fit the height and width specified in your <img> tag, while maintaining proportion.

 img { object-fit: cover; }

 <img src="https://via.placeholder.com/350x150" width="350" height="150"> <img src="https://via.placeholder.com/500x500" width="350" height="150">

Answer 4

if you add parameter to img tag , it has higher priority than style stated in css. so avoid adding width and height to img tag.