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%;
Related
This question already has answers here:
img max-width with percentage how does it work?
(4 answers)
Closed 1 year ago.
I know that to make an image responsive but not scaled up beyond its original size, all we have to do is setting max-width: 100%. But I am not sure why that setting works because literally it just tell the browser the image cannot exceed the width of the parent container, instead of the original image size. Could anyone please explain the reasons behind?
Consider a 1000px wide image in a 400px wide div. max-width 100% prevents the image from exceeding the size of the div.
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.
I just want to create image with title and button on top.
Text and button should be in container with set width. I just want to know what is the best way to do that.
There are lots of way that makes you confuse on internet and I don't know which one is best!
If your background image has always the same aspect ratio, you can make the height of the container proportional to the width of the background image.
Let's say your background image is 2000 x 1000 px. And let's say the screen is currently 800px wide. Then you want the container with the background image to be 400px high. To achieve this without setting hard coded breakpoints, you can use the "padding trick". If you set the padding (top or bottom) of a child element in percent, it calculates the height as a percentage of the parent element's width. So if you set the the container's padding-top to 50%, it will be half as high as the the parent element is wide. So in the case of 2000 x 1000 px: 1000 / 2000 * 100 = 50%.
.parent_w_bg {
background-image: url(...);
width: 100%;
}
.container {
width: 500px;
margin: 0 auto;
padding-top: 50%; // Assuming the background image's aspect ratio is 1:2
}
<div class="parent_w_bg">
<div class="container">
Header and button etc.
</div>
</div>
In such a scenario you should position the container relatively and it's children absolute, for example the header with a top value and the button with a bottom value.
Here a simple fiddle: https://jsfiddle.net/mmcc5rnk/
Using multiple image sizes for different breakpoints can be useful, but also problematic. Depends on your specific case, the size of your image(s) and the amount of breakpoints you want to use (and the differences). Using different images according to some specified breakpoints is fine and can be used regardless of the implementation.
Setting a height for an entire section is never a good idea, unless specified in the project requirements. Always depend on the inner content to stretch your section vertically.
About the background - if you are using multiple images, you can apply different sizes and positions for them in one common background setting so that they can scale an re-arrange when the viewport resizes, or if you have one big image, you can simply set the image background size to cover like so:
background: url('images/image.jpg') no-repeat center center/cover;
There are many ways to achieve your goal, but the most up to date way of doing things is using the Flexbox model.
All flexbox properties must be prefixed, so they can work across all browsers.
Explaining how Flex works is too broad for an answer, so you will have to learn it from the ground up.
Here is a Fiddle that represents your aim.
No need to add different images for each breakpoint,
image will resize automatically, you can add dynamic height by using jQuery
Demo here
Basically all I want is a whole bunch of images just one under each other. All these images are very different sizes and aspect ratios. I want all the images to be a maximum width and a maximum height without changing the aspect ratios of each image. How would i do this using html 5 and css3?
Take a parent block, for example a div with a class name main_div and then add this CSS
.main_div img {
width:100%;
height: auto;
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
My question revolves around CSS Fixed Layout vs a Float Layout that extends to fill the width of the browser.
Right now the issue I'm running into is to have the masthead resize depending on the width of the page (something that I understand isn't possible given current browser implementation of CSS3's background-image: size;). At this point, I feel like I've reached an impasse all around: Do I rework the site to use a fixed CSS layout, or do I keep the current layout and try to make the masthead image expand to fill most of the space provided? Moreover, what are the pros and cons of moving to a fixed width layout, and the other (unseen) ramifications of using one layout over another?
The site in question will be given as a comment to this question -- I don't want to be seen as trying to increase traffic to it.
Edit: Any other thoughts?
What about revealing more or less of the image as the browser is resized, rather than scaling the image? It's not quite the same effect, but it's an easy way to fill an entire space with an image.
Let's assume, for the sake of the example, that your masthead's background image contains a logo of some sort on top of, say, a photograph of a city skyline. This is, overall, 1600px wide. The logo sits to the left of the image while the cityscape extends far right. And we'll assume your markup looks roughly like this:
<div id="page">
<div id="masthead">...</div>
<div id="navigation">...</div>
...
</div>
We can set the #page element to an elastic width and apply a background image to the #masthead element:
#page {
max-width: 1600px;
min-width: 800px;
width: 80%;
}
#masthead {
background: url('path/to/image.jpg') no-repeat left top;
height: 100px;
width: auto;
}
What happens here is that the #masthead element will expand to the width of the #page element, which will be somewhere between 800px and 1600px wide (inclusive) depending on how wide the browser window is. When the #page element is 800px wide, you see only the left-most 800px of the skyline; when it's 1600px wide, you see the entire skyline. That way your logo is always visible and when the browser is resized, more of the cityscape is revealed.
This does require having a larger image to start with (at least as wide as your max-width, if you go elastic), but the result is a masthead that will look good no matter what size it is--without relying on, as strager mentioned, browsers' image resizing algorithms.
What kind of image is it? Is any part of it repeatable? Sometimes using two layers, one or the tag for a repeating element of the image and another for the fixed element.
Can we see an example? It would be easier to get to the right answer for your problem.
If you are trying to expand your background-image to the width of your page, it is better to use a fixed-sized layout as there is no cross-browser method to making a background-image expand to varying sizes that are dependent on the visitors resolution.
Fixed width layouts provide more flexibility for the designer, but not for the visitor. If you create a layout that is X pixels wide, then you are able to fine-tune your website pixel-by-pixel to your liking whereas "float" layouts (I call them liquid layouts) are based entirely on percent values and therefore differ from computer-to-computer. I find this difficult because you can test the layout on your screen and not know how it appears on someone else's, and (for ex.) a 20px margin has more of an effect on a 768px or 960px fixed-width layout than it does on a 1280px-liquid computer screen.
The major con, IMO, to a fixed-width layout is the fact that it looks too small on larger screens and too big on smaller screens. 768px used to be a fairly standard fixed-width layout, but now that is too small as the world moves away from 800x600. Now 960px is fairly standard, which is too big for 800x600 but still too small on 1280x1024.
It all depends on your audience and how your site fits together. Some layout can be made liquid and work perfectly fine, while others must be fixed (like the one you described).
Why not use an <img> tag for your header image (masthead) instead of using a background image?
I would suggest not scaling your header graphic; most browsers are terrible at image scaling (nearest neighbor what?) and it won't look good for many people.
I'm for fluid/float/liquid layouts myself. I fact, most of my sites use a single column, so I don't have to worry about all the complexities "normal" site layouts have.
It is generally a bad idea to create a layout where text-columns expand to the browser with. Text becomes hard to read if the lines grow to long. I recommend settling on a fixed with for the text-column, perhaps around 50 letters wide.