"The margin left of 10px will mean that the element is always too big for its container once the max-width comes into play "
Any max-width? Max width 22%? Or do you mean max-width:100% Is it max-width:100% holds an image to the browsers edge causing added margins to cause the image to exceed the browser’s edge?
EDIT:
I tried to add linear gradiet to the 100%/vh/block way of hold the image to the browser edge and it looks like padding-top and width100% override it. How can I add linear gradient for whan I want to cast a color on the image?
By default, the width of an object refers to its content width. Padding, border, and margin are not included in that width. If you give an object {width:100%} and also assign some horizontal padding, borders or margins, its width will be greater than 100%.
If one assigns {width:100%} to an image, that image will extend to the full width of its parent container. If the image is not in a box with a defined width, then it will extend to the full width of the browser window. IF one then assigns horizontal padding, borders or margins to the image, it will overflow the edge of the browser window and trigger a horizontal scrollbar.
If one assigns {max-width:100%} to an image, that image will extend to its full intrinsic (natural) width. It will not exceed that width. IF/WHEN the page width or the width of its containing element is reduced to less than the width of the image, then the image will shrink to fit the width of its container. IF one applies horizontal padding, borders, or margins to the image, it may overflow it’s parent container when conditions are narrow enough.
One is advised to apply padding, margin, or borders to the parent container of an image, NOT the image itself.
It can’t be done: merge vh with gradient because background size (e.g. 100% auto) and vh counter or try to override eachother. For auto I put in 100vh and when the screen is made narrow and tall blanks space stretches up covering the image. With more normal size screens, vh won’t adjust background size.
What can’t be done?
It’s still not clear what your intention is, so we are still blindly guessing at what you want.
So now I’m guessing you want two backgrounds, a gradient and an image.
Here the gradient fills the container and the image is on top, contained by it and maintains aspect.
It’s true, I’ve been asking for 3 things thinking I was asking for 2 things - that’s where the confusion is coming from. Sorry about that. vh is nifty but I need linear gradient more, so forget vh. Exactly what I need is the image held to the broswer edges
and I need to be able to use that color shading/casting, linear gradient. The code you have now doesn’t keep the bottom and top of the image held to the browser edge. Thanks for everyone’s patience. Chris
That’s very close but the left and right sides of the image are not held to the browser edge. I don’t see where that large space between the image and left and right edges is coming from in your code.
height auto is great for keeping an image looking normal (maintaining aspect ratio), but in this instance original look isn’t as nice as as-large-as-it-can-be look, mainly because small screen devices are mainly used in the upright rectangle position, giving an out of aspect ratio image a movie theatre look. Movie theatre look is better than too small look.
Not quite sure what the question is or whether indeed it was just an observation so my comments below may not be warranted
When you resize an image and you make one dimension auto then that means the image will maintain its aspect ratio no matter what. Images that must maintain their aspect ratio are images of real things like people or buildings or landscapes etc.
There is no point having an image of a person and then stretching its height but leaving its width the same or vice versa (although in real life a lot of people would benefit from that :)).
Therefore if you want to an image to occupy a space of different aspect ratio to the image then it can’t be done by stretching unless you don’t mind distorting the image. What you are talking about is ‘art direction’ and in those cases you would need to swap the image for another image which can be done with the picture element (or via media queries).
If on the other hand an image is a random decoration then it may be that it looks good squashed or stretched and then you can use the same image.
It’s more a question of mathematics most of the time and the relationship between the aspect ratio of the image you are using and the space you want it to be viewed in.
With background images you can use ‘cover’ but if you are trying to make a letterbox image cover a portrait viewport then although it can be done easily you will end up losing a lot of detail as both width and height are increased proportionately until the area is covered.
Art direction be good when original is too small and movie theatre (not literally) look looks better. The human brain can interpret most, if not all, strething and squeezing distortion without disgust/emotion. I think perefection is over-rated when there’s a need for more than perfection can offer - e.g. like making the most of those miniature screens.
I have to disagree and if I see distorted images on the web then I find that amateurish and off-putting (unless of course the distortion was based on some other criteria rather than trying to squash an image into a viewport).
Use the right image for the job and for the viewport.
There is rarely a need to misrepresent the real world by distorting it and I would be extremely annoyed if someone stretched or squashed a picture of me :).
Real things should remain real although I guess you cold stretch non important backgrounds that are purely decoration like the odd landscape but even then I would be uneasy.
I’m not sure what the difficulty is though because in all the hundreds of sites I’ve worked on in the last few years there has never been a need to distort an image. There was always a better option.
l think maybe I sounded like I was saying that if the image is small the image is no good. What I want to say is that one should consider stretching when one finds the image pretty small. I’m saying that because in the other thread I was thrilled when you showed me height:auto, but then I saw where no height:auto maybe useful for some who worry about images that are too small. You know there’s plenty of fonts that are tall and skinny, not to mention even more movie title artworks. It’s just something to consider. I like the movie look if it’s not too far from the original.
Actually I restarted this thread because where I wrote in the beginning, “I don’t want it kept so there’s no height:auto needed”, I worried you might see that as a complaint. I was surprised when you wrote. It’s a different need in this thread than the last thread.
Thanks again.
