Is it necessary to define the height: auto now days? and what the reasons is?
img {
max-width: 100%;
height: auto;
}
Thanks.
On an image without a height dimension explicitly set anywhere, it will actually default to height auto. So if you set max-width: 100%; the height will automatically be calculated by the browser to be the correct aspect ratio.
You may then think that it is not necessary to set the height to auto in the css but the real reason for it is if a height has been set on the img element with the height html attribute like this:
<img src="#" height="500" />
Although you may not set the height attribute explicitly yourself I know that wordpress for instance does set the height attribute on images that are pulled from the media library.
In this case if you only have set max-width to 100% the image will not be wider than the containing element but the aspect ratio will be wrong, the image most likely will be stretched taller. Use the css height auto to override the img tag height attribute.
That is why Bootstraps .img-responsive class sets height: auto;.
No, it's not.
MDN's docs on height states:
Initial value: auto
So, height property will be auto by default.
It makes sure the image is always displayed in the original aspect ratio. It's a common technique to realize responsive display of images. The important part is actually to always set only either width or height to soemthin other than auto. The browser will then resize the image, maintaining the aspect ratio.
max-width: 100%; in your code example makes sure the image is never displayed wider than its parent container.
In your code example, setting it is not necessary:
Most <img> have so-called intrinsic dimensions (such as JPG, PNG, GIF). In this case, stating neither width nor height explicitly makes the browser use those intrinsic dimension as a default for the given image. As soon as you specifiy exactly one of these, the other will be set to auto.
auto is the default value of the height CSS property. So, you don't need to define that value in the img element selector because you are not overriding it with a different value, you are just using the same default value.
It depends on what you want/are trying to do.
height:100%;
The element is going to have the 100% height of its parent container.
height:auto;
The element will have a flexible height. The height will adjust according to the height of the children elements within it.
Related
If I have an image or another media type (img, video, object, svg), then the browser 'knows' that it is 'supposed' to have a certain height and width ratio. This is useful for responsive design, because then you can set e.g. width: 100%; height: auto; and the height will scale to maintain the correct aspect ratio.
How (if at all) can CSS be used to give, say, an arbitrary div an intrinsic ratio?
Put another way, can an arbitrary element be given a height that always resolves to a certain constant times its width (or vice-versa), when the exact dimensions can't be known ahead of time, and computed dynamically?
You can use aspect-ratio or if you need better browser support you can use padding-bottom with a percentage.
So essentially:
.cool-div {
aspect-ratio: 16 / 9;
}
Im trying to build some fancy item grid by using bootstrap and flex. Therefore the item image always has to extend to 100% width of available space by keeping the 1:1 ratio.
http://www.bootply.com/kPLGHtA7Kh
I got it to work by using the css background image. But I struggle to make it look the same by using an img-tag. Im running out of ideas, hope you can help me.
In your CSS just specify the width: 100% on your image and don't touch the height (or set it to auto which is the default).
The parent of your image should also have a position:absolute or position:relative in order for the width to work properly
Demo : http://jsfiddle.net/s3spdy5z/
I think the images are pushing the width of the boxes to the max-width so kind of overriding the flexbox settings. With the background images you basically don't have any content inside them so flexbox can calculate the widths and not worry about content. The images are set to 100% but it thinks you want 100% of the max-width therefore the grid doesn't fit anymore.
If you set width: 33%; on the .flex-item and remove the min and max the grids will look the same.
I'm using a big image as background. However, it always resize automatically(Can't display full height of the img), How to deal with it?
One way is to set its height to the image's height. But when I'm reuse the class for other images, I have to change the height many times.
#HTML
div.img-bg
div.content
#CSS
.img-bg
background-image: .....
DEMO
Try background-size: auto; (the default value)
If you do not resize the background-image and use it's full size, your div.content should be as big as the image height.
So, as far as i understood, you set width to .content, now you can try to set height or min-height to fit the background-image's height.
Without height setted, I guess you have something like on the pic.
UPDATED DEMO
I would like to embed an slideshare presentation within a tooltip.
generally I want my tips to change their height/width dynamically based on their content hence I set (in my CSS)
width:auto;
height:auto;
I would like to have the width of the tooltip dictated by the inline width attribute of the iframe.
see here http://jsfiddle.net/elewinso/eNfHZ/
The meaning of width: auto depends on the properties of the element, and in this case, it means 300px, as per clause 10.3.1 of the CSS 2.1 spec. The iframe element has no intrinsic width, and you cannot (in CSS) make its width depend on the content of the iframed document. It is part of the very idea of iframe that the iframed document is rendered autonomously, independently of the settings of the framing document, except that the latter sets dimensions on the inline frame, but it needs to set them in its own context (which does not include the content of the iframed document).
So if you want to have your tooltip rendered smoothly, just don’t use iframe. Instead, use content (static or script-generated) in the main document.
If you just want to have the HTML width attribute on the iframe element take effect, just don’t override it in CSS. Any setting of the width property of an element will make the width attribute on it null and void.
100% width works:
div.sttip iframe{
width: 100%;
height: auto;
}
http://jsfiddle.net/eNfHZ/1/
You won't be able to maintain aspect ratio though, you'll have to use Javascript to calculate the height using a onResize event handler.
What does it mean when an element has a min-height but not a height?
div#single-post{
min-height:100px;
}
I just checked the site you gave and this is what I get
div#single-post
{
background-color: #FFFFFF;
padding-left: 20px;
padding-right: 20px;
}
There is no min-height for this id. Are you missing something?
Min-Height with no height would be the sidebar. Did you mean this???
If so, it is because it should still be there if there is no entry (otherwise, it would like dismiss and your site would look different), but it should also be able to expand if you are using a lot of modules or whatsoever
min-height sets a low-end threshold for the height of the element, but allows the content to control the height should the content exceed x px. Unlike the height property which doesn't allow the element to expand should content overfill the element set range.
min-width works in much the same way, except it does not allow content to dictate the width. Rather the minimum width is used to set limitations on how fluid page layouts resize when your browser window is adjusted. If you set min-width to 500px, the browser will not let your element shrink to less than 500px wide.
source: http://www.webmasterworld.com/forum83/5671.htm
So by using min-height in different areas of the site the user does not have to worry about content being missing or hidden by height restrictions as he/she can rest assured that the element will expand.