CODEWITHSUNDEEP
htmlcssresponsive
Hassan Baig
Hassan Baig

Reputation: 15804

Fixing image responsiveness via pure CSS

I run a Django-based instagram clone where users share photos with others. Photos appear with styling that makes them look like polaroids. Moreover, captions are added within the polaroid styling, not outside it. Here's an example:

enter image description here

My question is: how do I make the image responsive (in pure CSS)? Currently, it's aspect ratio gets skewed for smaller windows (only width is responsive, height is not). Observe:

enter image description here

Here's how my code looks currently:

<style>

.polaroid{
    text-align:center;
    background-color: #ffffff;
    display: inline-block;
    padding: 10px;
    -webkit-box-shadow: 3px 3px 3px #9E9E9E; 
    -moz-box-shadow: 3px 3px 3px #9E9E9E;
    box-shadow: 3px 3px 3px #9E9E9E;
}

.inner_img{
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    width: 100%;
}

.img_caption{
    display: table-caption;
    caption-side: bottom;
    width:100%;
}

</style>

<div class="polaroid">
<img src="{{ tup.1|s3 }}" width="{{ tup.3 }}" height="{{ tup.4 }}" class="inner_img" alt="photo">
<div class="img_caption">{{ tup.5 }}</div>                       
</div>

Note I: I'd prefer to stick close to well-supported HTML4/CSS2 elements (as listed on caniuse.com) for max compatibility.

Note II: Don't be alarmed by syntax containing {{ }}. These are Django template variables that contain useful values for the html tags. E.g. width="{{ tup.3 }}" height="{{ tup.4 }}" translates to width="300" height="224" for this particular image.

Upvotes: 0

Views: 107

Answers (7)

Aqib Zaman
Aqib Zaman

Reputation: 285

Try this 

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

Hope it works

Upvotes: 0

Marco Salerno
Marco Salerno

Reputation: 5203

Try to change div's max-width to see it responsive

div {
  display: table;
  max-width: 100px;
}

img {
  display: table;
  margin: 0 auto;
  width: 100%;
}

label {
  display: table;
  margin: 0 auto;
}
<div><img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Bauhaus.JPG"/><label>Oh my god this place is so beautiful please buy pizza for me</label></div>

Upvotes: 0

Michieltronaut
Michieltronaut

Reputation: 71

You should remove te inline height and width of the image and set the image width and height in your CSS to:

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

Upvotes: 0

Nenad Cvetanovic
Nenad Cvetanovic

Reputation: 1

You have hardcoded height in your IMG tag (html), thats making a problem. Just remove the height parameter from IMG tag and the image will auto adjust.

Upvotes: 0

Antony SUTHAKAR J
Antony SUTHAKAR J

Reputation: 930

@Hassan Baig,

You should avoid to mention both 'width' and 'height' attributes otherwise the image will get stretch like this.

For this case, you should remove the 'height' property from the image in HTML or you can add 'height: auto !important' in CSS to override the inline style.

'!important' will override the existing height value and it will allow the image to set height auto based on the width.

Hope it would be helpful!.

Upvotes: 1

JiiB
JiiB

Reputation: 1456

To keep the aspect ratio of an img, add:

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

Upvotes: 1

Rahul
Rahul

Reputation: 2071

For responsive image.

img{
    display: block;
    height: auto;
    margin-left: auto; /* For center the image */
    margin-right: auto; /* For center the image */
    max-width: 100%;
}

Upvotes: 1

Related Questions