Css fitting image to background size

How to Resize Background Images with CSS3

Background images can be used for resizing and scaling. In CSS2.1, background images set to a container kept their fixed dimensions. Luckily, CSS3 represents the background-size property, which allows backgrounds to be stretched or squashed. It is ideal if you use Responsive Web Design techniques to create a template.

Some different methods will be shown below.

Absolute Resizing

When we set a background image, by default, the width, and height of the image are set to «auto», which retains the original image size. If it is needed to resize it, there can be used absolute measurements to have a new size, for instance, px, em, cm, etc.

Measurements of the length can be carried out by using the background-size property with an absolute measurement.

While resizing an image, the aspect ratio (the viewable area and display shape) must be maintained. Otherwise, the image might get distorted and lose some quality of the image.

Let’s see an example of a resized background image.

Example of creating an absolutely resized background image:

html> html> head> title>Resized Background Image title> style> .resized < width: 400px; height: 300px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: 300px 200px; background-repeat: no-repeat; border: 1px solid #999; > style> head> body> h2>Resized Background Image h2> div class="resized"> div> body> html>

Result

Relative Resizing Using Percentages

The use of a percentage value can be useful for responsive designs. When a percentage value is used, the dimension is based on the containing element and not on the size of the image. If the background-size property is set to «100% 100%», the background image will stretch to cover the entire content area.

Example of adding a relatively resized background image:

html> html> head> title>Resized Background Image title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: 100% 100%; background-repeat: no-repeat; border: 2px solid #999; > style> head> body> h2>Resized Background Image h2> div class="resized"> div> body> html>

However, the width of the background image depends on the size of its container. And it is not recommended to use percentages when you have a specific width for your container.

Maximum Size Scaling

When the background-size property is set to its «contain» value, the background image will scale, and try to fit the content area. The image, however, will maintain its aspect ratio (the proportional relation between the width and height of the image).

The «contain» value specifies that the background image should be scaled regardless of the size of the container so that each side will be as large as possible without exceeding the length of the container’s corresponding side.

In other words, the image will increase or decrease proportionally, but the dimensions of the container will not exceed the width and height.

Example of resizing the background image with the «contain» value of the background-size property:

html> html> head> title>Resized and Responsive Background Image title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-repeat: no-repeat; background-size: contain; border: 1px solid #999; > style> head> body> h2>Resized and Responsive Background Image h2> p>Resize the browser to see the effect: p> div class="resized"> div> body> html>

Covering the Background

When the background-size property is set to its «cover» value, the background image will scale to cover the whole content area. The image is scaled to fit the whole container, but the image will be cropped if it has a different aspect ratio.

The «cover» value specifies the size of the background image to be as small as possible while ensuring that both dimensions are greater than or equal to the container’s corresponding size.

Example of resizing the background image with the «cover» value of the background-size property:

html> html> head> title>Resized and Responsive Background Image title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: cover; border: 1px solid #999; > style> head> body> h2>Resized and Responsive Background Image h2> p>Resize the browser to see the effect: p> div class="resized"> div> body> html>

Setting Different Backgrounds for Different Devices

A big photo on a large computer screen could be ideal, but on a small device, it can be worthless. Why load a big picture if you still have to scale it down?

You can use media queries to display different images on different devices to reduce the load.

Here the @media rule is used. In this example, there is one large image and one smaller image that is set to be displayed on different devices. You will see the effect when you resize the browser width, and the background image will change at 500px. To see the effect clearly, toggle device toolbar and have a mobile view.

Example of adding different backgrounds for different devices:

html> html> head> title>Resized and Responsive Background Image title> style> /* For width smaller than 500px: */ body < background-repeat: no-repeat; background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"); > /* For width 500px and larger: */ @media only screen and (min-width: 500px) < body < background-image: url("/uploads/media/default/0001/03/6514e37cd15dbe1bca3e3b961baa3a19e2283dc3.jpeg"); > > p < margin-top: 220px; > style> head> body> p> Resize the browser width and the background image will change at 500px. To see the effect clearly, toggle device toolbar and have mobile view. p> body> html>

Источник

A Deep Dive Into object-fit And background-size In CSS

An image will have an aspect ratio, and the browser will fill the containing box with that image. If the image’s aspect ratio is different than the width and height specified for it, then the result will be either a squeezed or stretched image.

We see this in the following figure:

The Solution

We don’t always need to add a different-sized image when the aspect ratio of the image doesn’t align with the containing element’s width and height. Before diving into CSS solutions, I want to show you how we used to do this in photo-editing apps:

Now that we understand how that works, let’s get into how this works in the browser. (Spoiler alert: It’s easier!)

CSS object-fit

The object-fit property defines how the content of a replaced element such as img or video should be resized to fit its container. The default value for object-fit is fill , which can result in an image being squeezed or stretched.

Let’s go over the possible values.

Meet Smashing Workshops on front-end & UX, with practical takeaways, live sessions, video recordings and a friendly Q&A. On design systems, UX, web performance and CSS/JS. With Brad Frost, Christine Vallaure and so many others.

Possible Values for object-fit

object-fit: contain

In this case, the image will be resized to fit the aspect ratio of its container. If the image’s aspect ratio doesn’t match the container’s, it will be letterboxed.

object-fit: cover

Here, the image will also be resized to fit the aspect ratio of its container, and if the image’s aspect ratio doesn’t match the container’s, then it will be clipped to fit.

object-fit: fill

With this, the image will be resized to fit the aspect ratio of its container, and if the image’s aspect ratio doesn’t match the container’s, it will be either squeezed or stretched. We don’t want that.

object-fit: none

In this case, the image won’t be resized at all, neither stretched nor squeezed. It works like the cover value, but it doesn’t respect its container’s aspect ratio.

Aside from object-fit , we also have the object-position property, which is responsible for positioning an image within its container.

Possible Values For object-position

The object-position property works similar to CSS’ background-position property:

The top and bottom keywords also work when the aspect ratio of the containing box is vertically larger:

CSS background-size

With background-size , the first difference is that we’re dealing with the background, not an HTML ( img ) element.

Possible Values for background-size

The possible values for background-size are auto , contain , and cover .

background-size: auto

With auto , the image will stay at its default size:

background-size: cover

Here, the image will be resized to fit in the container. If the aspect ratios are not the same, then the image will be masked to fit.

background-size: contain

In this case, the image will be resized to fit in the container. If the aspect ratios are off, then the image will be letterboxed as shown in the next example:

As for background-position , it’s similar to how object-position works. The only difference is that the default position of object-position is different than that of background-position .

When Not to Use object-fit or background-size

If the element or the image is given a fixed height and has either background-size: cover or object-fit: cover applied to it, there will be a point where the image will be too wide, thus losing important detail that might affect how the user perceives the image.

Consider the following example in which the image is given a fixed height:

If the card’s container is too wide, it will result in what we see on the right (an image that is too wide). That is because we are not specifying an aspect ratio.

There is only one of two fixes for this. The first is to use the padding hack to create an intrinsic ratio.

The second fix is to use the new aspect-ratio CSS property. Using it, we can do the following:

Note: I’ve already written about the aspect-ratio property in detail in case you want to learn about it: “Let’s Learn About Aspect Ratio In CSS”.

Use Cases And Examples

User Avatars

A perfect use case for object-fit: cover is user avatars. The aspect ratio allowed for an avatar is often square. Placing an image in a square container could distort the image.

Logos List

Listing the clients of a business is important. We will often use logos for this purpose. Because the logos will have different sizes, we need a way to resize them without distorting them.

Thankfully, object-fit: contain is a good solution for that.

Article Thumbnail

This is a very common use case. The container for an article thumbnail might not always have an image with the same aspect ratio. This issue should be fixed by the content management system (CMS) in the first place, but it isn’t always.

Hero Background

In this use case, the decision of whether to use an img element or a CSS background will depend on the following:

• Is the image important? If CSS is disabled for some reason, would we want the user to see the image?
• Or is the image’s purpose merely decorative?

Based on our answer, we can decide which feature to use. If the image is important:

If the image is decorative, we can go with background-image :

The CSS is shorter in this case. Make sure that any text placed over the image is readable and accessible.

Adding a Background to an Image With object-fit: contain

Did you know that you can add a background color to img ? We would benefit from that when also using object-fit: contain .

In the example below, we have a grid of images. When the aspect ratios of the image and the container are different, the background color will appear.

Video Element

Have you ever needed a video as a background? If so, then you probably wanted it to take up the full width and height of its parent.

To make it fully cover the width and height of its parent, we need to override the default object-fit value:

Conclusion

As we’ve seen, both object-fit and background-size are very useful for handling different image aspect ratios. We won’t always have control over setting the perfect dimensions for each image, and that’s where these two CSS features shine.

A friendly reminder on the accessibility implications of choosing between an img element and a CSS background: If the image is purely decorative, then go for a CSS background. Otherwise, an img is more suitable.

I hope you’ve found this article useful. Thank you for reading.

Источник