Is there any difference between declaring both width and max-width and declaring only one?
As I have understood, using only the max-width property causes all of an element's content to be fit dynamically when the viewport is resized.
Consider the following pen, feel free to resize the window to see what happens:https://codepen.io/harrison-rood/pen/KKzPQMW
The first example is an image with an explicit width of 800px.
The second is an image with a max-width of 800px, but a width of 100%.
See how one is responsive and the other is not? In the first example, we're telling the image it needs to be exactly 800px. In the second example, we're saying that the image should be a fluid 100%, but not any bigger than 800px, no matter what.
You can also use this idea in reverse. The third example has an image with a width of auto (as big as possible) but a max width of 100%, meaning that it will be as big as its container, but not overflow out of it.
The fourth example shows what would happen without max width. See how the image stretches way past its container because it is much larger?
Hope this clears things up! If it does, be sure to leave an upvote!
This is because screen resolutions can be different sizes. Lets say you have an element with a width of 15%, if you increase your window width, 15% becomes larger in pixels. You can set a max-width from preventing it from going over a certain width in pixels.
Using max-width, as the name implies, means that, when a container contains more content than it can fit, its width won't exceed the specified max-width.
max-width is specifically used to prevent a container's width from increasing when it contains more content than it can fit—instead, when max-width is specified, the content will overflow out of the container.
Related
If i just write a simple code like this:
<img src="mycat.jpg" height="300px";>
Now, if the image is very large, the height will get reduced to 300px, and automatically the width will get reduced too to fit the height size. Why is that? I thought that, if the width is not specified, it remains on "auto" which means, the width of the element adjusts to the width of the content, in this case, the width of the original image size. When i change the height of the element, the height of the image changes too to fit the element size, but why is the width changes too? It must be because the ratio is fixed. Is that the case?
Yes, i know that, if i set the width to 100%, the image will expand to fill in the entire width of the element block, but why is it that if its set on auto, it adjusts to the height of the element rather than stay with the original size of the image since the width of the element has not been changed?
Also, is there an actual way to change the size of the content, i.e. the image itself rather than changing the size of the element which contains the image? I could use display:flex and change the space between the element and the image, so is there a way to target just the image and not the entire element itself?
an image is scaled by default when you try to give it height but not the width in order to maintain its looks suppose an image is 2160px of height and 3840px of width and you change it to width to 300px only this will affect the height and make the height to 168px
and for more understanding try to resize the image in paint where the initial scale will looks like this
and when you resize it to 300px of wide it will also look like this
Why does Dev Inspector in Chrome shows width of 100% width page in different width than I have on my monitor? I have 1920x1080 monitor and in full screen I don't get 1920 but only 1519 pixels. This number changes by the zoom.
What is reason behind this? It makes hard to code style when I don't have a proper information about a width.
When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.” So, if you have a parent container that’s 400px wide, a child element given a width of 100% will also be 400px wide, and will still be subject to margins, paddings, and borders — on top of the 100% width setting.
Have a look here for more https://www.impressivewebs.com/width-100-percent-css/
I've got an image whose height is set as 100%. This makes the image display correctly as I would expect so long as there's plenty of width. However, when the screen's width is reduced eventually the image loses it's ratio because the width is squished while the height still remains 100%. I would like to have the image always stretch to the maximum size possible within the container without losing it's ratio. In other words, it the width is the limiting factor, the image should use 100% width and maintain ratio, but if the height is the limiting factor, than the image should use 100% height while maintaining its ratio, and it should be able to switch between these. Is there a way to do this purely in CSS? Thanks!
This should keep the correct ratio (providing you don’t need the height to be set to 100% for some reason).
img{
width: 100%;
height: auto;
}
--EDIT--
If you want to retain a consistent height of the parent element then you can either:
Hide the overflowing image using overflow: hidden;. Although this
means you will lose some of the image at larger sizes. See
example.
Use max-width and max-height to stop the image growing at a
certain point. This means you will potentially be left with some
white space in the design. See example.
Is it possible to make an element behave/sized like the background-size:contain? For reference, here's a page demonstrating background-size:contain (try resizing your browser window and see what the background image does).
That is, I want to make an element with constrained aspect ratio, with width and height such that either width or height will be 100% of the window width (and the other will be whatever is necessary to preserve ratio and keep the entire element visible in the window without scrollbars)?
For example, suppose I want an element to have a ratio of 16:9. If someone's browser window is super wide and not very tall, then I want my element's height to be 100% and the width would be less (whatever is necessary to keep the element's ratio 16:9). If someone's browser window is really tall and not very wide, then the width would be be 100% and the height would be less (again, whatever is necessary to preserve that element's target ratio).
I'm thinking the only way to do this is with javascript. Is there some magical CSS way to accomplish this that I don't know about?
I guess you want to have a liquid template view.
Checkout this example if it suits your need
http://www.maxdesign.com.au/articles/liquid/liquid-sample1/
Thanks.
If I have an image combined with a style:
<img class="test" src="testimage.jpg" />
img.test { width: 50%;}
The image resizes to 50% the width of the box containing it, as well as resizing vertically, maintaining the aspect ratio.
This seems to require the enclosing DIV to be set to a particular width and height value. But if you want the enclosing DIV to resize automatically as the browser is dragged smaller or larger, wouldn't this be a problem?
I've clarified my answer to your original question. Go take a look and see if it clears things up. More or less, if you want the image to resize with the window you can't set the DIV to a fixed width and height. The DIV must have a % width and height also.
You'll need to manually specify the width and height properties to get the image to keep its dimensions. This wouldn't be too difficult if you're using server-side coding (PHP/ASP).
Another way to do it would be to use JavaScript to calculate and resize the image dynamically.
No, the image will still be 50% of the div, and if the div is a proportion of the page, that doesn't matter.
Its all proportions: The enclosing div might be 2/3 of the whole window, and the image will wil 1/2 of that. It all gets calculated before its displayed, just a bunch of number crunching. ;D