Responsive Images

HTML & CSS
1

Hi I’m trying to get responsive images working.

My question is should I just always give the container of the img a set width and then give the image a width:100%? And where should I set the max-width, container or image itself? Same question with the height.

http://thoroughbredstrategies.com/ my site here I have 3 images in a row and I have given them all same set width and height. Which isn’t going to be very responsive.

Also to stop the images looking stretch I plan to use object-fit:cover and object-position: center center. Is the correct way?

To make it more responsive I was going to set the container of the images to :

.wpb_single_image .vc_single_image-wrapper {
    display: inline-block;
    vertical-align: top;
    max-width: 100%;
    height: 290px;
    max-height: 290px;
    /* overflow: auto; */
}

And then the actual images to:

.three-info img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

Is this good responsive code?

2

The right method depends on the exact behaviour and layout you want from the images.
The very simplest thing you can do is:-

img {
   width: 100%;
   height: auto;
}

Any block element that contains the image will be naturally responsive an the 100% will make the image stretch to fit, while height: auto maintains the aspect ratio.

Though in some cases you may require a different set up. for example in some cases the container may be way wider than the original image resolution, so width: 100% will blow the image up making it blurry. That’s where I tend to use max-width: 100% instead, so the image does not exceed its native size, or the container size on smaller screens.
Where you want to control an explicit max width and height, use the html attributes in the img tag, then use css to override that to become responsive.

3

But if I use height:auto then that means 3 images won’t all be the same height

4

So you would rather have them be the same height and have different widths?

5

No I want them all to be same width and height.

If done this:

.three-info img {
    max-width: 100%;
    height: auto;
}

Then the middle image goes longer than the other 2.

6

So would I have to give the container of the images a set height like 300px and then set the img to height:100%?

7

Well, if they all don’t have the same aspect, something has to either go or enter.

Would you rather have the browser crop off some of an image or have spaces around an image?

1 Like
8

Hi there 05beckga,

here is a working example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<base href="http://thoroughbredstrategies.com/wp-content/uploads/">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
h1, h2 {
    font-size: 1em;
    text-align: center;
    text-transform: uppercase;
 }
#container {
    max-width: 68.75em;
    padding: 2% 1%;
    margin: auto;
    border: 0.062em solid #999;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden;
 }
#container div {
    float: left;
    width: 33.333%;
    padding: 0 1%;
    box-sizing: border-box;
 }
#container div img {
    display: block;
    height: auto;
    margin: auto;
    border: 0.062em solid #999;
    box-sizing: border-box;
 }
#container div:nth-child(1) img {
    width: 97.4%;
 }
#container div:nth-child(2) img {
    width: 62.337%;
 }
#container div:nth-child(3) img {
    width: 100%;
 }
</style>

</head>
<body> 
 <h1>Images with varying heights</h1>
  <div id="container">
   <div>
    <img src="2016/12/belmont1-1.png" width="688" height="441" alt="">
     <h2>Grow the sport</h2>
      <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed 
       libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat.
      </p>
   </div><div>
    <img src="2017/11/marquee-call-centre.jpg" width="600" height="600" alt="">
     <h2>Reach new markets</h2>
      <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed 
       libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat.
      </p>
   </div><div>
    <img src="2016/12/tsslider1-1.jpg" width="960" height="600" alt="">
     <h2>Memorable experiences</h2>
      <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed 
       libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat.
      </p>
   </div>
  </div>

</body>
</html>

If you really want the images to have identical dimensions
then that requires the use of a little surgery. :winky:

Check out the attachment…

05beckga.zip (151.4 KB)

coothead

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.