47

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?

2

6 Answers 6

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

Worked for me.
Thanks for MrMisterMan for his assistance.

1
  • 2
    Use display: inline-block; if your container element has text-align: center; and you want your image to be centered.
    – chocolata
    Aug 6, 2015 at 13:46
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;
}
5
  • 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, 2012 at 8: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, 2012 at 8: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. Jul 31, 2012 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, 2012 at 11:52
  • 1
    @DanielHanly credit where credit is due. It was a team effort. Jul 31, 2012 at 12:02
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

3
  • 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, 2012 at 9:00
  • but css is not for conditions u have to do it with script Jul 31, 2012 at 9: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, 2012 at 9:16
0

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.

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
-1

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.