I would like to have a CSS class and/or solution where the image is 100% width (with height being auto), but max its own size. Anyway to achieve that or do I need to specify max width image-by-image?
If you set:
width: 100%;
height: auto;
The image will be as bigger as its container is. The ratio between width and height will be kept.
If the image's width is lower then container's width then it will be scaled till it fits the available space. In this case you may want to use:
max-width: 100%;
height: auto;
This should do it:
img {
max-width: 100%;
height: auto;
}
If the window is bigger than the image, the image will not be scaled. If the window is smaller than the image, the image should scale. I noticed you said that it doesn't in your comment to Krasimir's answer. You might want to check and see if there is other CSS that may be changing this behaviour.
Related
I have an image which width should be as large as possible and I want it's height to not exceed the height of the parent while also maintaining the aspect ratio of 16:9. The issue right now is, it works well till the screen size is 1591px, if it gets bigger than that, the height exceeds and the vertical scroll bar appears. I don't want that behavior. How can I achieve that?
the scrollBar appears because of the overflow you can do 2 things
use the "overflow: hidden;"
body{
overflow: hidden;
}
you can use max-width to determine the max-width of the element and set it on both of the elements
I hope it was helpful 😁
UPDATE: the original answer assumed from the question that the image was an HTML img. The solution was to set width to 100% [of its container] and height to 70vh and use object-fit.
However, it is not an img it is a canvas.
The required aspect ratio is known to be 16 / 9. This snippet therefore sets the max-width to 100% (of whatever is the container) and the max-height to 70vh.
This way there can never be any overflow and the canvas will be as big as it can be within those constraints.
body {
width: 100vw;
margin: 0;
}
canvas {
max-width: 100%;
max-height: 70vh;
aspect-ratio: 16 / 9;
background: green;
}
<canvas width="1600" height="900"></canvas>
I have a 64px that I would want to scale with browser window I have added max-width 100% but the image stays the same.
Html
<img src="../images/GitHub-Mark-64px.png">
CSS
img{
max-width: 100%;
height: auto;
}
If your image is smaller than the containing DIV, your CSS rule won't make it any bigger. Try to use width instead of max-width:
img{
width: 100%;
height: auto;
}
Addition/Edit after Comments of OP:
You can use any percentage value in this rule, like 60% (or whatever you like), but using width, not max-width (which is only a maximum limit, but not an actual size definition).
But note: It won't really look good if the original image is smaller than displayed and is "blown up".
Try using width instead of max-width in your CSS, width attribute actually sets the width of the img. However, setting it to 100% would actually cover the entire space, so perhaps you should use a lesser percentage accordingly.
Read: CSS Image size, how to fill, not stretch?
If you want to use the image as a CSS background, there is an elegant solution. Simply use cover or contain in the background-size CSS3 property.
width: 100%;
height: 100%
background-size: cover;
I have a set of logos of variable size. I've set them all up at the same height of 50px with a width of auto:
.img-logo {
width: auto;
height: 50px;
}
This works fine until the window is resized. When the window is resized, wider logos flow outside of their container.
I would like the logos to shrink to fit their container width. I have tried to achieve this with max-width:
.img-logo {
max-width: 100%;
width: auto;
height: 50px;
}
This works but the aspect ratio is compromised due to the height property remaining 50px.
Any ideas?
With a fixed height and variable width either of the below can happen.
The img gets stretched to accommodate the variable width and skew the aspect ratio.
The img gets cropped (overflow:hidden) by the parent but the aspect ration is kept intact.
So you can make the img responsive too. But then it wont have the constant height, while keeping the aspect ratio intact.
I think it's impossible to keep its size when the window is too small and you didn't want to change ths size of image. Why not try #media,which can provide different css styles in different conditions.
I'm new to using vh/vw values in css, but it's come in handy on my current project, where I want the main content container to fill the whole viewport height. This works fantastically until the viewport is shrunk vertically to around 200/300px, when the layout breaks.
What I want is for it to work exactly as it is (fill the whole screen) but to stop shrinking at a fixed pixel value. However, the following didn't work, as I'd hoped:
.container {
height: 90vh;
min-height: 400px;
}
Can anyone suggest a solution?
Thanks in advance.
main content container to fill the whole viewport height
.container {
height: 100vh;
min-height: 300px;
}
1vh — one equal 1/100 height of viewport.
I cannot use JS, this should be archived by CSS only. Container (DIV) is auto width (flexible) "table-cell" element.
I'd want to scale image down only when it width is larger than container (user can resize window - that's the reason).
I've used code shown below but it work only on IE7.
max-width: 100%;
height: auto;
width: auto\9;
I've tried to find any working fix for IE9, but without success.
Your max-width needs to be set to the image size and then width to 100% like so:
img {
width: 100%;
max-width: 500px;
height: auto;
}
Of course, this means that your max-width must be dynamically set based off the image being loaded, which may not be practical.
I stumbled upon this old question while trying to do the exact same thing the OP was trying. I am answering for anyone who may land here. Upon examining http://jsfiddle.net/SAada/2/ mentioned by the OP, I found an interesting solution:
setting
height: auto;
will ensure that the image will not be stretched / scaled up. At the same time, setting
max-width: 100%
will ensure that if the parent element width is less than the image width, the image is scaled down.
Thus, the combination that works for me is:
img {
max-width: 100%;
height: auto;
}
Oh, and after some more search, I discovered that this technique is also used by Bootstrap for responsive images!