CODEWITHSUNDEEP
cssimageresponsive-design
Dan Hanly
Dan Hanly

Reputation: 7839

Responsive Images with CSS

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?

Upvotes: 47

Views: 171742

Answers (6)

Mizo Games
Mizo Games

Reputation: 189

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

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

Upvotes: -1

Naseeruddin V N
Naseeruddin V N

Reputation: 625

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

Upvotes: 0

artskeem
artskeem

Reputation: 34

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.

Upvotes: 0

Dan Hanly
Dan Hanly

Reputation: 7839

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

Worked for me.
Thanks for MrMisterMan for his assistance.

Upvotes: 90

Sahil Popli
Sahil Popli

Reputation: 105

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

Upvotes: 0

punkrockbuddyholly
punkrockbuddyholly

Reputation: 9794

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;
}

Upvotes: 14

Related Questions