I have situation like this
Both divs have the same height, image width scales fine but height doesn't. In productLogo class I set width and height to 100% - no results, I also tried with min and max height. Can you tell me what is wrong here?
Related
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.
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
I am new to responsive web design and was looking at an answer.
It doesn't really explain much but provides a solution.
If an img is set as width: 100% I understand that it will occupy 100% of the browser window or its containing element.
The max-width property states that it is used to set the max width of an element.
If I set an img tag to max-width: 100% to what element/context is the percent calculated against?
All I see is when max-width is used the image scales down but never up.
Max-width example: http://jsfiddle.net/ErNeT/1445/
Width example:http://jsfiddle.net/ErNeT/1446/
If I set an img tag to max-width: 100% to what element/context is the
percent calculated against?
By default an img tag has no dimension set on it. So whatever happens, that image will never resize. However, applying max-width will make it behave like it has 100% width. It will resize based on the parent container BUT will stop at the maximum width the image has. For example: if the image was sliced to have 100px width, it will resize up to 100px width.
On the other hand, by applying width (and no max-width property) it will disregard all other width properties of the image and the parent container.
If you set max-width to img then it will be the max-width of its parent. If you don't specify a width for the img then it will not exceed it's native size.
When you set percentage values, both width and max-width are relative to the containing block. However, if the width of the containing block depends on the width of the element, the resulting layout is undefined.
From the specification,
https://www.w3.org/TR/CSS2/visudet.html#the-width-property
Specifies a percentage width. The percentage is
calculated with respect to the width of the generated box's containing
block. If the containing block's width depends on this element's
width, then the resulting layout is undefined in CSS 2.1. Note: For
absolutely positioned elements whose containing block is based on a
block container element, the percentage is calculated with respect to
the width of the padding box of that element. This is a change from
CSS1, where the percentage width was always calculated with respect to
the content box of the parent element.
https://www.w3.org/TR/CSS2/visudet.html#min-max-widths
Specifies a percentage for determining the used value.
The percentage is calculated with respect to the width of the
generated box's containing block. If the containing block's width is
negative, the used value is zero. If the containing block's width
depends on this element's width, then the resulting layout is
undefined in CSS 2.1.
From my point of view
if width > max-width use max-width
Example: Let's say you have 1 div box or Image which is you set the size of the box width > 1000px and max-width 500px. It still follow the max-width.
Example 2 - Using percentage : Let's say that div of your width set 500px, and max-width :100%; what is the result you will get ? The box div will turn 500px that is your starting point. Try shrink it. What is the result you will get next? It's turn responsive.
DEMO
this is what i understand about the difference between width and max-width.
Based on your question and fiddle, I think this is the answer what you're looking for.
Max-width example: DEMO2
- When you start use max-width and set 100%. let say your images size is width is 300px. Meaning that your images starting point are 300px. You aren't override the original image width.
Width example: DEMO3
- When you start use width and set 100%. Meaning that your image are override the original image width.
I'm validating my HTML 5 pages and I get a lot of errors because I specified the width and height of my images in percentage. I though that this was the best way because if I specify it in pixels it won't resize when the site is viewed on a smaller device.
What's the correct way to specify the width and height of an image in HTML?
Thanks
If the original image is the aspect ratio that you want then just specify the with % and the height will change automatically. Make sure that the height of the parent div does not have a specified height as that may cause some problems. Also positioning of the rest of the page should be relative.
I would like to know whether its possible to have an element with a percentage width but to the closest x number (i.e. for my case 200).
The reason for this is because I have a fluid div which is set to 90% of the browser window while I have images at 200px that fill the screen, but because of odd sizes like 830px I am left with excess on the right hand side.
I believe some JS could achieve this?
You can use min-width, min-height, max-width, max-height. Play around with JSFiddle.Fiddle