Weird image sizing issue

OK - working through site issues and have my sliders working now (former problem), but…

The images in the slider are sized much larger than they really are. I looked through all the classes that I could find and I don’t see anything that would make such a thing happen. I see nothing in the JS to affect it either.

The images are in a section called “Quoted by” which is the second slider on the page. The images are colored placeholders. The section starts on line 503 of the HTML.

HTML is here.

CSS is here.

Any idea on what would be causing this?

Thanks guys!

The image is expanding to fit its container…

element.style {  /* the element is a list item and these are inline styles, that usually means JS */
    float: left;
    list-style: outside none none;
    position: relative;
    width: 720px;
}

What browser do youj use and what kind/s of developer’s tools are you familiar with?

1 Like

FF (Win) is my main browser, but I check in others. I use FireFox Dev Tools to look at things (as best I can) but use Dreamweaver CS4 for editing.

I find the Firebug plug-in tool to be easy to use and informative. You might give it a try.

I am not familiar wtih bxslider. Someone else will have to help you with that.

Thanks Ronpat.

I don’t know how to style the images there because the heights are consistent but the widths vary. So shrinking the container to a fixed width sounds like trouble.

The images are being styled from this ruleset in bxslider.css

.bx-wrapper img {
max-width: 100%;
/* width: 100%; this rule was causing the stretching*/
height: auto;
display: block;
margin: auto; /*added this rule to center img*/
}

The width:100% was causing the images to expand to the parent’s width of 720px that @ronpat pointed out.

I also added margin:auto to center the images

3 Likes

Thanks very much Ray.

I still don’t get why the max-width: 100%; is not affecting things now. Because of display:block?

Also…

Using the same principal as max-width was doing before the change, is it possible to use max-height: 100%; to force an image to fill the max height of a div? What I’m getting at is another section of the page where there’s an image left and text right in a div. An image of course is fixed height but the text varies a little in each browser/OS. The idea is to stretch the image a few pixels to adjust to the length of rendered text so that the tops and bottoms all align evenly.

In the case of width:100%; … It changes the images actual intrinsic width. When using % with the width property, the parent element’s width is what determines the child’s % width. Which can result in stretching.

In the case of max-width:100%;… It cannot override the images intrinsic width. But it will allow it to scale down and maintain it’s aspect ratio when the parent container becomes smaller than the images actual width.

So what made the parent container smaller than the image’s actual width?

max-height?

Did you mean to say…
what made the parent container larger than the image’s actual width?

If so, that was pointed out in post #2 and it was the js that is inserting the width of 720px on the parent li

The image’s actual size is…
<img src="images/logotest1.jpg" alt="x" height="240" width="360">

So the parent width was never smaller than the image width

EDIT:
Oh I see now, you were referring to my comments on max-width

But it will allow it to scale down and maintain it’s aspect ratio when the parent container becomes smaller than the images actual width.

I was speaking hypothetically of how it would scale down on responsive pages. Such as with media queries or with the parent having a fluid width.

If you aren’t familiar with your browser’s dev tools (try f12) it would be worth your time getting to know it better.

It will allow you to see the rendered (computed) image sizes eg.

wider view-port

narrow view-port

Thanks guys. Still trying to wrap my head around this.

Can anyone answer this part?

That’s only possible if the div has a fixed height and then that would be the same as setting the pixel height of the image anyway. If the div has a percentage height then all the parents of that div would need a chain of heights in percentage going right back to root (html and body). (You would use height anyway and not max-height as max-height only comes into play when the height of the image exceeds the height of the container. The width of the image would then need to be set to auto to maintain aspect ratio.)

The easy way to do what you want would be to use a background image instead and then it will always be stretched by the text.

e.g. Something like this:

Thanks Paul. Interesting idea about the background image. The layout is vertical image left, text column right. I can make a background image to look like that for a text overlay, but what happens when the responsive layout adjusts for phone or tablet?

How about using the object-fit property?

Though it does not have MS support yet.

Yes you can use the object-fit property to manage the look of the image if using custom length and width for the image but you still have the same problem in that you can’t find the height of the parent in order to stretch the image to 100% height.

There are tricks with percentages/cells/flexbox etc but they are a bit convoluted and don’t work as well as the background image in my demo above.

I’m not quite sure what you are asking but the demo of mine is pretty similar to your layout with picture on the left and text on the right controlling the height. Obviously for smaller screens you would throw in a media query and have the the image on top and the text underneath. I’ve updated the demo above to add the media query.

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