CODEWITHSUNDEEP
javascripthtmlcss
wabizo
wabizo

Reputation: 57

How to display images in the same size - with filled space?

I have specified a maximum width for my pictures. Now I have the problem that the pictures are not the same in height. Is there a way to fill in the missing height with a white area (same size at the top and bottom) so that the maximum height is reached but the image is not distorted?

My code:

<div class="w3-row-padding">
  <div class="filterDiv master">
    <div class="w3-col l3 m6 w3-margin-bottom">
      <div class="w3-display-container">
        <div class="w3-display-topleft w3-black w3-padding">Master</div>
        <img src="Img/5.jpg" alt="House" style="width:99%">
      </div>
    </div>
  </div>
  <div class="filterDiv master">
    <div class="w3-col l3 m6 w3-margin-bottom">
      <div class="w3-display-container">
        <div class="w3-display-topleft w3-black w3-padding">Master</div>
        <img src="Img/6.jpg" alt="House" style="width:99%">
      </div>
    </div>
  </div>
  <div class="filterDiv master">
    <div class="w3-col l3 m6 w3-margin-bottom">
      <div class="w3-display-container">
        <div class="w3-display-topleft w3-black w3-padding">Master</div>
        <img src="Img/7.jpg" alt="House" style="width:99%">
      </div>
    </div>
  </div>
  <div class="filterDiv master">
    <div class="w3-col l3 m6 w3-margin-bottom">
      <div class="w3-display-container">
        <div class="w3-display-topleft w3-black w3-padding">Master</div>
        <img src="Img/8.jpg" alt="House" style="width:99%">
      </div>
    </div>
  </div>
</div>

w3school framework used.

Upvotes: 0

Views: 61

Answers (2)

Safi Habhab
Safi Habhab

Reputation: 1077

a good practice is to give for each parent div which are the w3-col divs a background-image and a common class which specifies other needed background properties and the wanted height which is 200px. thereby, the images will not be stretched since the divs are the ones that are specified with the wanted height.

The HTML Code will be:

 <div class="w3-row-padding">
        <div class="filterDiv master">
            <div class="w3-col l3 m6 w3-margin-bottom">
                <div class="w3-display-container img-container1 img-container ">
                    <div class="w3-display-topleft w3-black w3-padding ">Master
                    </div>
                </div>
            </div>
        </div>
        <div class="filterDiv master">
            <div class="w3-col l3 m6 w3-margin-bottom img-container2 img-container ">
                <div class="w3-display-container">
                    <div class="w3-display-topleft w3-black w3-padding ">Master</div>
                </div>
            </div>
        </div>
        <div class="filterDiv master">
            <div class="w3-col l3 m6 w3-margin-bottom">
                <div class="w3-display-container  img-container3 img-container ">
                    <div class="w3-display-topleft w3-black w3-padding">Master</div>
                </div>
            </div>
        </div>
        <div class="filterDiv master">
            <div class="w3-col l3 m6 w3-margin-bottom">
                <div class="w3-display-container img-container4 img-container ">
                    <div class="w3-display-topleft w3-black w3-padding ">Master</div>
                </div>
            </div>
        </div>
    </div>

given the following CSS


.img-container {
    height: 200px;
    background-position: center;
    background-size: cover;
}

.img-container1 {
    background-image: url("Img/5.jpg");

}

.img-container2 {
    background-image: url("Img/6.jpg");

}

.img-container3 {
    background-image: url("Img/7.jpg");


}

.img-container4 {
    background-image: url("Img/8.jpg");


}

Upvotes: 0

user13031184
user13031184

Reputation: 

img {
  height: 200px;
  object-fit: cover;
}

hope this works

Upvotes: 1

Related Questions