Is it possible to have an image of arbitrary dimensions fit within a given width and height, but without using a fixed container?
Obviously it's easy enough to create a container of specific dimensions and have an img fit within that, however that potentially leads to additional whitespace within the container along the dimension where an image's aspect ratio is shorter or taller than the container.
Is it possible to tell an image:
it should be as large as possible
maintain its aspect ratio
never exceed width of a
never exceed height of b
contain no whitespace
To be clear, this needs to involve only CSS and no knowledge of the images' dimensions at runtime.
img{
object-fit: cover;
}
you can check more about object-fit here
You can achieve this using the CSS Property object-fit: cover;.
That will tell the image to maintain its aspect ratio, never exceed the containers width and height and not have white space, but in order to keep the aspect ratio and still fit within the container without white space it will cut off the sides of the image.
Related
I have the width and height of image A,
and I want to change the aspect ratio of image B to have the aspect ratio of A without any container element, such as div, a, etc.
Then, How does image B have the aspect ratio of A without any container element?
If you want to change the aspect ratio without a container, you can use a transform on image B. This will of course distort the image, but that's kinda unavoidable since you are changing the aspect ratio.
A scale transform will shrink or expand an element by a multiple you specify.
In order for this to work, you need to know how image B's size relates to image A's. This won't be totally automatic.
In the example below, we have two images: A. is 200x300, and B. is 400x100.
We want B to become the same size as A, so we need to cut B's width in half and multiply its height by 3. In CSS, that means we do scaleX(0.5) and scaleY(3.0).
The end result is this:
img:nth-child(2) {
transform: scaleX(0.5) scaleY(3.0);
}
<img src="http://placehold.it/200x300">
<img src="http://placehold.it/400x100">
You can also pick different numbers to get the same aspect ratio but not have the two images be exactly the same size. For example, transform: scaleX(0.25) scaleY(1.5) would give you image B at image A's aspect ratio, but half the size of image A.
You can try height: auto CSS attribute. Even when the HTML attributes width and height are not keeping aspect ratio, height: auto CSS will fix this.
.minisize {
height: auto!important
}
Demo of my code. Even when width is 300px and height is 1px, it still show an smaller image that keeping aspect ration: https://jsfiddle.net/99qrn65L/
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 6 years ago.
Is there a way, in css, to automatically crop an image so that it fits and aspect ratio without forcing it into a certain sized div. I have a page with a few thumbnails that are dynamical generated and contain an image at the top and some text, They are then displayed in rows across the screen. Very slight diffrences in image size can cause the lay to mess up. As i'm accepting user images i would like to accept a range of sizes of about the right aspect ratio rather that just one. The divs the images are in use auto width and height to maximize space usage and readability with different numbers and on different screen sizes. I have looked at object-fit but as the div resizes this dose not seem to work. The images have slight, almost undetectable, sizes differences which messes up the layout.
Edit: I would like the height and the width to be a proportion of each other without specifying the size. E.g An image height divided by width should be 1.4 and it should crop the image to make this true.
It is difficult to know exactly what you want without an example of code or a screenshot but assuming it is the height rather than the width that is causing the issue (based on past experience) would this work?
img {height: 80px; width: auto; max-width: 120px;}
/* adjusting the size for the width you want. */
If the images are wrapped in a container, you could try
max-width: 100%;
I have written a fairly basic javascript function that when an image is clicked on a full sized version appears in the foreground.
The image is set with max-width and max-height numbers in a CSS file such that it leaves some space around the outside and it preserves it's own proportions.
The problem is that if the image happens to not be large, or the screen of the users device has a very high pixel density then the 'larger' image might not be any larger.
Is there a way I can keep proportions, not exceed say 90% on either side, but set the largest dimension to be 90%.
The closest similar method I have found is the fill option for backgrounds.
Cheers
Set the width and height of the image to a relative value like 100% - (margin + border + padding) so that it will be stretched regardless of its actual dimensions.
Using max-width and max-height is a nice way to restrain your image from growing beyond specific proporitions, but leaves room for the image to decide what size it wants to be within those bounds. You say you do not want this, thus set width and height as well.
You can embed that image in div tag and apply css property width:100% to image and on click of image increase the width of div proportionately as per the resolution. In this scenario image with less width than parent div gets adjusted as per width of parent div.
I'd like to make an image always be at least 600px height, but still maintaining at least 100% width (while keeping aspect ratio). Over flow on either side is fine. I just want the image to always fill the full width of the screen and always reach at least 600px in height.
It's hard (maybe impossible) to achieve what you want. You will have to choose two of the three options (aspect ratio, width, height).
One way to do it would be this, but it can break aspect ratio:
img {
min-height: 600px;
width: 100%
}
I would like to animate the width of a container with multiple divs using CSS3 transitions. Each child has a background and a property background-size: cover.
I prefer to use CSS3 scale rather than width for better performances. But with scale the background doesn't keep its aspect ratio.
Here is a fiddle showing the problem.
Is it possible to keep aspect ratio?
I don't think it is possible using scale.
You see, the thing is when you use width to scale the div it forces the browser to do some math for the element and an entire box model, it doeas the layout of the CSS and repaints and rerenders it entirely.
When you use scale it moves your element to a separate layer and it doesn't recalculate anything, it's just the GPU that processes your element in a very "graphical" way, so scaling 0,5 is just shrinking it visually and thats it. This is the reasony why, as you said, CSS transform is better in terms of performance - because it doesn't recalculate things, but there are some drawbacks of using those transform as you can see. Since it deosn't do the math, it cannot do background-size: cover because there is just not enaugh information to know how to paint it.
Or, let me put it this way: if you do width: 50% browser calculates the width of the element and knows it - thanks to that information it can position your background the way you want (and you want it to cover so its doing the math, taking the width, height, you background image size etc.).
If you do scale it doesn't know the width of the element in terms of CSS layout, it doesn't even care. It just knows how wide it was initialy (visually), renders the layer and than just shrinks it down without any further processing whatsoever. And since its GPU doing that, it's really really fast.