Responsive Images with CSS

Question

I'm finding it tricky to resize images to make them responsive.

I'm developing a php application to automatically convert a website to a responsive version. I'm a little stuck on the images.

I've successfully added a wrapper class to every image on a website and can re-size the images quite well.

My issue lies with images that are naturally smaller than the the window, such as logos and icons. I don't want to resize these.

My code currently converts:

<img src="[src]" />

into:

<div class="erb-image-wrapper">
    <img src="[src]" />
</div>

Where I use the following CSS:

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

This resizes all images, but I only want it to resize images that are over the width of the page. Is the a way I can achieve this via CSS?

This might be interesting: there is a "Responsive Images Community" Group out there -> http://www.w3.org/community/respimg/ — Chris, Aug 10 '12 at 17:49
Also, if you care about bandwidth, [slimmage.js can swap out image URIs based on runtime evaluation of max-width](http://github.com/imazen/slimmage). — Lilith River, Jul 08 '13 at 17:05

score 90 · Accepted Answer · answered Jul 31 '12 at 11:55

90

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

Worked for me.
Thanks for MrMisterMan for his assistance.

answered Jul 31 '12 at 11:55

Dan Hanly

7,829
13
73
134

2

Use `display: inline-block;` if your container element has `text-align: center;` and you want your image to be centered. – chocolata Aug 06 '15 at 13:46

score 14 · Answer 2 · answered Jul 31 '12 at 08:51

14

Use max-width on the images too. Change:

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

to...

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

answered Jul 31 '12 at 08:51

punkrockbuddyholly

9,675
7
36
69

I've tried this, and it works for images that are smaller, but those that are larger are squashed, because it keeps the height and resizes the width – Dan Hanly Jul 31 '12 at 08:54
2

I've tried it with height:auto; instead of max-height:100% and it works. Stick it in your answer and I'll mark you correct. – Dan Hanly Jul 31 '12 at 08:59
@DanielHanly I wasn't aware `height:auto` would fix the problem so it would be kinda cheating to stick it in my answer! You can answer and accept your own questions if you find the solution yourself. – punkrockbuddyholly Jul 31 '12 at 11:15
2

Just thought, in the interest of helping others that happen upon the page. Your solution lead me to discover the actual answer. I'll take the credit then ;) – Dan Hanly Jul 31 '12 at 11:52
1

@DanielHanly credit where credit is due. It was a team effort. – punkrockbuddyholly Jul 31 '12 at 12:02

score 0 · Answer 3 · answered Jul 31 '12 at 08:57

0

check the images first with php if it is small then the standerd size for logo provide it any other css class and dont change its size

i think you have to take up scripting in between

answered Jul 31 '12 at 08:57

Sahil Popli

105
9

I'm trying to avoid lots of processing in the php, trying to do it in CSS only will help a lot. – Dan Hanly Jul 31 '12 at 09:00
but css is not for conditions u have to do it with script – Sahil Popli Jul 31 '12 at 09:04
I have completed a solution with CSS only. I think you're thinking in script. I can set max-width on an image and it'll only resize it if it's greater than the bounds. Check the upvoted answer. – Dan Hanly Jul 31 '12 at 09:16

score 0 · Answer 4 · edited Jan 23 '14 at 08:29

um responsive is simple

first off create a class named cell give it the property of display:table-cell
then @ max-width:700px do {display:block; width:100%; clear:both}

and that's it no absolute divs ever; divs needs to be 100% then max-width: - desired width - for inner framming. A true responsive sites has less than 9 lines of css anything passed that you are in a world of shit and over complicated things.

PS : reset.css style sheets are what makes css blinds there was a logical reason why they gave default styles in the first place.

score 0 · Answer 5 · edited Apr 09 '17 at 19:50

0

the best way i found was to set the image you want to view responsively as a background image and sent a css property for the div as cover.

background-image : url('YOUR URL');
background-size : cover

edited Apr 09 '17 at 19:50

Bjorn Reppen

22,007
9
64
88

answered Apr 09 '17 at 19:23

Naseeruddin V N

597
5
17

score -1 · Answer 6 · edited Jan 11 '19 at 19:36

-1

Use max-width:100%;, height: auto; and display:block; as follow:

image {
    max-width:100%;
    height: auto;
    display:block;
}

edited Jan 11 '19 at 19:36

brooksrelyt

3,925
5
31
54

answered Aug 02 '16 at 21:36

Mizo Games

189
2
8

Responsive Images with CSS

6 Answers6

Linked