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.
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 div with three images (in varying aspect ratios) in it. Lets say image1 is 16:9, image2 is 4:3, and image3 is 1:1.
I want all images to have the same height, so I set their height to 100% and their width to auto.
Now I want to scale the whole div up so that it takes 100% of the container, or in my case 100vw.
The goal is that the height of the div scales up accordingly, so that the images in the div scale up too, so that in the end I have a row of 3 images that take up 100vw and all have the same height.
The problem is that I can't get this to work. When I give the div a fixed height, the images scale up properly, but I want it the other way around, so that the height of the div is flexible and the height of the images gets scaled up until the whole row fills 100% of the container of the div.
Can someone help?`
What I have:
.gallerygroup3 {
height: 500px; /* <-- Works widht a fixed height, but not with 100% or anything else */
width: 100vw;
}
#gallery img {
width: auto;
height: 100%;
}
Try changing the width : auto; in #gallery img to width : 33.33vw (since there are 3 images), then try changing the div's height, and it should work. Hope this helps! :D
I can't get this simple slideshow to re-size correctly. When I shrink down the window, the image width compresses, but the height does not, and I want the height/width ratio to remain the same as the viewport shrinks. I know the fault lies somewhere in my CSS, and but I can't track down the issue. Any help appreciated.
Just use height: auto
.slides img {
height: auto;
/* Rest of you code */
}
So I've been trying to create a simple page where the image takes up 100% of the height, with a small sidebar. I want the image to resize itself when I resize the window. When I resize the window vertically, the width stays the same, which is not what I want (I want it to retain it's aspect ratio whatever the window size). I really dislike this distortion, but am unsure of how to fix it. Any idea what I'm doing wrong?
.big-image {
max-height: 100%;
min-width: 20%;
margin: auto;
overflow: hidden;
}
set display: block or display: inline-block to your .big-image class, in order for the max-height and min-width property to work. These properties, along with height, width, min-height, max-width, padding-top, padding-bottom, margin-top and margin-bottom doesn't work on inline elements.
You can set either the height or width of an image to auto and control the other property with a set size whether that be percentage or px. That auto should maintain the aspect ratio of the image while you get to control the size of the image with the other property.
max-width:100% and height:auto will work. When applying max-width:1000%; it will take the width of the container and height will be proportionately varied.
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.