I have a Gall-Peters projection on my website. I want to give the image 100% of available width while keeping the height correct so that countries do not get elongated. What is the right CSS to keep the aspect ratio?
img {
width: 100%;
height: auto;
}
Simply width: 100%. The height of an image should automatically be set to keep the original aspect ratio.
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>
Is there a way to include images in AMP without knowing it's width and height?
I have tried layout=responsive, but it stretches the image as per the given height and width instead of making it responsive.(Original image's aspect ratio is not maintain, instead the given height and width value's aspect ratio is maintained).
I have also tried layout=fill, It maintains aspect ratio but it creates padding if the given height/width is larger than original image's height/width.
If anybody can help me with this problem, as I don't know the dimension of image and want to load it with correct aspect ratio without padding.
AMP has a static layout, which means the height of every element must be known in advance. This is why there is no way to embed images with unknown dimensions. There are two workarounds:
1.) Define a fixed height container and let the image fill the available space while maintaining the correct aspect-ratio (this might result in some padding). This is possible by combining layout=fill with the object-fit: contain CSS property.
.fixed-height-container {
position: relative;
width: 100%;
height: 300px;
}
amp-img.contain img {
object-fit: contain;
}
<div class="fixed-height-container">
<amp-img class="contain"
layout="fill"
src="https://unsplash.it/400/300"></amp-img>
</div>
2.) The other option is to crop the image to fill the available space.
.fixed-height-container {
position: relative;
width: 100%;
height: 300px;
}
amp-img. cover img {
object-fit: cover;
}
<div class="fixed-height-container">
<amp-img class="cover"
layout="fill"
src="https://unsplash.it/400/300"></amp-img>
</div>
You can find a working sample of the different patterns on ampbyexample.com.
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 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.
So I want to scale an image down with css into the size of a container, while maintaining its aspect ratio. It seems easy enough to achieve this when specifying the minimum height OR width, but not both. Any ideas?
Find out if the height is less or the width is less; whichever dimension is less, set that property of the img but not the other. Assuming you aren't setting the size of the img in CSS, this should maintain the aspect ratio while making the image as large as possible within the constraints of the container. This code assumes your container is a div.
var height = $('#divImg').Height();
var width = $('#divImg').Width();
if (height > width)
{
$('#divImg img').Width(width);
}
else
{
$('#divImg img').Height(height);
}
EDIT:
If you aren't using jQuery, you can use the following CSS trick to maintain aspect ratio. Change 100px to the size of your container:
#divImg img {
height: 100px;
width: auto;
}
#divImg img {
height: auto;
width: 100px;
}
Borrowed from CSS styling image height and width while maintaining aspect ratio.