How do I make images the same size on a page using HTML and CSS?

user_17671088 0
Viewed 310

I need to make six images the same size, but everything I've done isn't working and so I'm here searching for help.

Here is my HTML:

<div>
    <h1>Finest Images</h1>
    <img src="img/arch.jpg" alt="Arch">
    <img src="img/lake.jpg" alt="Lake">
    <img src="img/landscape.jpg" alt="Landscape">
    <img src="img/perfect.jpg" alt="Perfect">
    <img src="img/treesnwater.jpg" alt="TreesnWater">
    <img src="img/walk.jpg" alt="Walk">
</div>
css html
7 Answers

Suppose your html looks like this

<div>
   <img class="imgClass1">
   <img class="imgClass2">
   <img class="imgClass3">
   <img class="imgClass4">
   <img class="imgClass5">
   <img class="imgClass6">
</div>

then you can add style in css as

.imgClass1, .imgClass2, .imgClass3, .imgClass4, .imgClass5, .imgClass6 {
   width: 100px;
   height: 100px;
}
user_109623640

You have multiple ways to do these. One way would be use css. For example:

<div>
  <img src="folder/pic.jpg">
  <img src="folder/subfolder/pic.jpg">
</div>

And the css will look like:

div img {
  height: 100px;
  width: 100px;
}

You can add inline styles to the elements, too.

<img style="height: 100px; width: 100px;"  src="folder/pic.jpg">
<img style="height: 100px; width: 100px;"  src="folder/subfolder/pic.jpg">
user_148071110

You can just add styles inline in HTML:

<div>
    <h1>Finest Images</h1>
    <img style="width:100px; height:100px;" src="img/arch.jpg" alt="Arch">
    <img style="width:100px; height:100px;" src="img/lake.jpg" alt="Lake">
    <img style="width:100px; height:100px;" src="img/landscape.jpg" alt="Landscape">
    <img style="width:100px; height:100px;" src="img/perfect.jpg" alt="Perfect">
    <img style="width:100px; height:100px;" src="img/treesnwater.jpg" alt="TreesnWater">
    <img style="width:100px; height:100px;" src="img/walk.jpg" alt="Walk">
</div>
user_143898300 

img {
  max-width: 100%;
  max-height: auto;
  position: relative;
  vertical-align: middle;
  left: 50%;
  transform: translate(-50%);
  height: 150px;
  width: 150px;
  object-fit:cover;
}

div {
  width: 20%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
<div>
  <img src=""> Text(1)
</div>



<div>
  <img src=""> Text(2)
</div>


<div>
  <img src=""> Text(3)
</div>


<div>
 <img src=""> Text(4)
</div>
<div>
  <img src=""> Text(5)
</div>


<div>
<div>
  <img src=""> Text(6)
</div>


<div>

user_162997150

Also you can use from flex:

<div class="container">
<div>
    <img src="folder/img1">
</div>
<div>
    <img src="folder/img2">
</div>
<div>
    <img src="folder/img3">
</div>
<div>
    <img src="folder/img4">
</div>
<div>
    <img src="folder/img5">
</div>
<div>
    <img src="folder/img6">
</div>
</div>

css:

If you want to images sorted in the page width:

.container{
            display: flex;
            justify-content: space-between;//or justify-content: center;
        }
        .container div{
            width: 150px;
            height: 150px;
        }
        img{
            width: 100%;
            height: 100%;
        }

Otherwise, if you want to images placed below each other:

    .container{
                display: flex;
                flex-direction: column;
                }
.

.
user_170071840

This solution might work for the issue that you're facing.

Add a class to the div element, then add CSS using parent class.

.sequence-img img {
  height: 200px;
  width: 200px;
  object-fit: cover;
}
<div class="sequence-img">
    <h1>Finest Images</h1>
    <img src="http://via.placeholder.com/640x360" alt="Arch">
    <img src="https://dummyimage.com/lrgrec" alt="Lake">
    <img src="https://dummyimage.com/16:9x1080/" alt="Landscape">
    <img src="https://user-images.githubusercontent.com/13071055/45196982-c7bd6100-b213-11e8-90c9-8c9cdee8717f.png" alt="Perfect">
    <img src="https://dummyimage.com/lrgrec" alt="TreesnWater">
    <img src="https://dummyimage.com/16:9x1080/" alt="Walk">
</div>

user_176656610

You could add this css code to your HTML

   img {
        float: left;
        width:  100px;
        height: 100px;
        object-fit: cover;
    }
    <div>
      <h1>Finest Images</h1>
      <img src="http://i.imgur.com/tI5jq2c.jpg">
      <img src="http://i.imgur.com/37w80TG.jpg">
      <img src="http://i.imgur.com/B1MCOtx.jpg">
    </div>

user_175879030
Related