Making images dynamically change size based on screen size-CodePudding

I am trying to make a gallery-type page with 4 images side by side that scales in size depending on the screen size. I am using this guide: https://www.w3schools.com/howto/howto_css_image_responsive.asp

Currently I can make it work with just 1 image but as I have several images side by side (float:left) they don't scale anymore until it's scaled down to the point of just being 1 image seen from a left-right perspective.

This is the page I am working on: https://medielab.dk/index.php

Here is the html code:

<div id="content-1">

<img src="images/400px.png"  width="600" height="400">

<img src="images/400px.png"  width="600" height="400">

<img src="images/400px.png"  width="600" height="400">

<img src="images/400px.png"  width="600" height="400">


</div> <!-- content-1 luk -->

And here is the css:

#content-1 {
    height:400px;
    width:auto;
    border-radius: 1px;
    border-style: solid;
}

#content-1-box-1 {
    height:auto;
    width:auto;
    border-radius: 1px;
    border-style: solid;
    border-color: #ff9de1;
    float:left;
}

#content-1-box-2 {
    height:auto;
    width:auto;
    border-radius: 1px;
    border-style: solid;
    border-color: #ff9de1;
    float:left;
}

#content-1-box-3 {
    height:auto;
    width:auto;
    border-radius: 1px;
    border-style: solid;
    border-color: #ff9de1;
    float:left;
}

#content-1-box-4 {
    height:auto;
    width:auto;
    border-radius: 1px;
    border-style: solid;
    border-color: #ff9de1;
    float:left;
}

.responsive {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

CodePudding user response：

Basically give each image width of 100%. It can be inside containers of width 25% each to have 4 in a row. You can use media query so that the containers would have width of 50% for smaller screens (<768px) so that there would be 2 in a row.

#content-1 {
  height: 400px;
  width: auto;
  border-radius: 1px;
  border-style: solid;
}

.my-col {
  float: left;
  width: 50%;
}

@media only screen and (min-width: 768px) {
  .my-col {
    width: 25%;
  }
}

.responsive {
  width: 100%;
  height: auto;
  display: block;
}

<div id="content-1">
  <div >
    <img src="https://picsum.photos/200"  width="600" height="400">
  </div>
  <div >
    <img src="https://picsum.photos/200"  width="600" height="400">
  </div>
  <div >
    <img src="https://picsum.photos/200"  width="600" height="400">
  </div>
  <div >
    <img src="https://picsum.photos/200"  width="600" height="400">
  </div>

</div>
<!-- content-1 luk -->
<div style="clear:both"></div>
don't forget to clear floats

CodePudding user response：

Use display:flex in your container. Wrap each image in a div then set the image width to 100% so it scales to fit each element.

HTML:

<div id="content-1">
  <div>
    <img src="https://picsum.photos/400" >
  </div>
  <div>
    <img src="https://picsum.photos/400" >
  </div>
  <div>
    <img src="https://picsum.photos/400" >
  </div>
  <div>
    <img src="https://picsum.photos/400" >
  </div>
</div>

css

    #content-1 {display:flex; gap:0.5rem;}
    
    #content-1 > div {border: 1px solid grey;}
    
    #content-1 > div > img {width:100%;}

    @media screen and (max-width: 500px) {
        #content-1 {
        flex-direction: column;
       }
    }

Codepen here

Edited to add: I've updated the codepen to show how you can use a media query to push the images to stack on top of each other for small screen sizes and make it a bit more mobile device friendly.