Liquid Layout: 100% max-width img not applied - why?
I'm totally new to this liquid layout stuff. I've notice, as most of us, that while most of my layout components "liquify", images, unfortunately, don't.
So I'm trying to use the max-width: 100% on images as suggested on several places.
However, and despite the definition of max-width and min-height of the img container, the img don't scale.
If you see it on a wide resolution, you would notice that the "kid image", for example, don't scale.
Any clue about what could the issue be, why does that image not scale?
Test case:
Browsers: Firefox 15.0 / Chrome 21.0
IOS: MAC OS X Lion - 10.7.3
Resolution: 1920x1200
What I get:
I get an image that doesn't scale until the end of it's container.
The img width won't fit the article element that contains it.
What I do expect: I expect the image to enlarge, until it reaches the end it's container. Visually, I'm expecting the image to be as wide as the paragraph immediately below, in a way that, the right side of the image stays vertically aligned with the right side of the paragraph below.
I think you misunderstand what max-width does.
max-width:100% means "the maximum width this element can be is 100% of it's container". Anything that's naturally smaller will not be affected. That's what you have now and it's working properly. If you used max-width:800px, it would mean "never let this image be more than 800px wide", it wouldn't force an 800px width, that's what width is for.
width:100% means "this element should always be 100% width of it's container". Anything that would normally be smaller must now take up the entire width. Anything bigger will shrink to the container's width.
For your case, just use width:100% and size your actual images to fit the actual maximum (and pick a reasonable maximum width for the container). Images usually look better when scaled down than scaled up, but when optimizing for mobile devices you might want to do the opposite.
The reason you usually see max-width:100% as a default style is so images don't extend beyond their containers and break the layout, since images are usually sized naturally by their actual width.
- Why does an empty preprocessor command still evaluate to something?
- How to implement variable sized array within C struct
- Character array typecasting to integer
- How can I exclude non-numeric keys? CS50 Caesar Pset2
- How to get the sign, mantissa and exponent of a floating point number
- Why do MCU libraries use logic operations instead of bitfield structs?
- What kind of implementation can I use for a static associative array on a vintage system with very limited resources?
- Determine libraries to link against for a windows library function?
- Passing macro values to arm linker that places variable at a specific location
- running a program with wildcards as arguments
- How to perform addition of two vectors of 8-bit integers with a single addition in C/C++
- GNU RISC-V Embedded GCC throws "x ISA extension `xw' must be set with the versions" error
- Counting pulses using a swiss flow meter with an Arduino, how is it done?
- How to create a folder in C (need to run on both Linux and Windows)
- Is there any way to compute the width of an integer type at compile-time?
- How can I initialize all members of an array to the same value?
- Is C notably faster than C++
- How to get the Windows SDK version number a program is compiling with at compile time
- Confused by difference between expression inside if and expression outside if
- Equivalent of atoi for unsigned integers
- k&r: Exercise 1-18. Program takes input but doesnt produce any output?
- Using in C thrd_sleep() to either wait for time or interrupt by signal. Example?
- How can I compute `exp(x)/2` when `x` is large?
- c programming: answer always equates to 0
- Is it possible to access a parameter of a function from another function in C?
- Will this expression evaluate to true or false (1 or 0) in C?
- What Is the Return Value of strcspn() When Str1 Does not Contain Str2?
- Mapping a numeric range onto another
- Signalled and non-signalled state of event
- Why is faster to do a branch than a lookup?