CSS - How to Make Responsive Images

Make an image responsive - the simplest way

You can try doing

<p>
  <a href="MY WEBSITE LINK" target="_blank">
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
  </a>
</p>

This should scale your image if in a fluid layout.

For responsive (meaning your layout reacts to the size of the window) you can add a class to the image and use @media queries in CSS to change the width of the image.

Note that changing the height of the image will mess with the ratio.

How to make two images responsive with fixed height and plain CSS?

It's not super clear what you're asking but there are a few ways to make images responsive with a fixed height and fluid width.

The easiest of which is to use the object-fit: cover rule. Try adding object-fit: cover to your .image element.

https://www.w3schools.com/css/css3_object-fit.asp

This should force it to fill its container without warping its dimensions.

If you want to build a 2-column grid, you need to set the width of the containers using calc, and remove the margin-right on all the even containers.

.container {
  width: calc(50% - 10px);
  margin-right: 20px;
  float: left;
}

.container:nth-child(2n) {
  margin-right: 0;
}

.image {
  object-fit: cover;
  height: 412px;
}

I modified your js fiddle here: https://jsfiddle.net/hnxz7co9/34/

Responsive Images with CSS

.erb-image-wrapper img{
    max-width:100% !important;
    height:auto;
    display:block;
}

Worked for me.

Thanks for MrMisterMan for his assistance.

Responsive images different sizes

Here is an example of a responsive layout for the elements included in your question.

Please note - this is just an example of what you can do with CSS responsive features, properties and units.

I have included a @media query which reduces the number of columns from 4 to 2 at a breakpoint of 600px.

To demonstrate an array of what's possible I have also used responsive units:

• %
• vw

a responsive property:

• aspect-ratio

a responsive display:

• display: flex

and a responsive function:

• min()

---

Working Example:

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: min(100%, 960px);
  margin: 0 auto;
}

.gallery-link {
  display: block;
  flex: 0 0 22%;
  margin-bottom: 3%;
  line-height: 1.5;
  font-size: min(16px, 3vw);
  text-align: center;
  outline: 1px solid rgb(255, 0, 0);
}

.gallery-figure {
  display: block;
  width: 100%;
  margin: 0;
}

.gallery-image {
  display: block;
  width: 100%;
  border: 1px solid rgb(0, 0, 255);
  border-radius: 50%;
  aspect-ratio: 235/352;
}

@media screen and (max-width: 600px) {
  .gallery-link {
    flex: 0 0 44%;
  }
}

<div class="gallery">

  <a class="gallery-link" href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Butler_Wedding.jpg" title="Click on image to open gallery" alt="Butler Wedding" />
    </figure>
    <figcaption>Butler Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Engagement_Session.jpg" title="Click on image to open gallery" alt="Engagement Session" />
    </figure>
    <figcaption>Engagement Session</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Fluke–Chenault_Wedding.jpg" title="Click on image to open gallery" alt="Fluke–Chenault Wedding" />
    </figure>
    <figcaption>Fluke–Chenault Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Bridal_Shoot/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Bridal_Shoot.jpg" title="Click on image to open gallery" alt="Bridal Shoot" />
    </figure>
    <figcaption>Bridal Shoot</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Butler_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Butler_Wedding.jpg" title="Click on image to open gallery" alt="Butler Wedding" />
    </figure>
    <figcaption>Butler Wedding</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Engagement_Session/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Engagement_Session.jpg" title="Click on image to open gallery" alt="Engagement Session" />
    </figure>
    <figcaption>Engagement Session</figcaption>
  </a>

  <a class="gallery-link" href="/Portfolio/Weddings/Fluke–Chenault_Wedding/index.html" target="_blank">
    <figure class="gallery-figure">
      <img class="gallery-image" src="/images/weddings/Fluke–Chenault_Wedding.jpg" title="Click on image to open gallery" alt="Fluke–Chenault Wedding" />
    </figure>
    <figcaption>Fluke–Chenault Wedding</figcaption>
  </a>

</div>

---

Related Topics