Responsive Web Design — Images

Resize the browser window to see how the image scales to fit the page.

Using The width Property

If the width property is set to a percentage and the height property is set to «auto», the image will be responsive and scale up and down:

Example

Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using The max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Example

Add an Image to The Example Web Page

Example

Background Images

Background images can also respond to resizing and scaling.

Here we will show three different methods:

1. If the background-size property is set to «contain», the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image’s width and height):

Here is the CSS code:

Example

2. If the background-size property is set to «100% 100%», the background image will stretch to cover the entire content area:

Here is the CSS code:

Example

3. If the background-size property is set to «cover», the background image will scale to cover the entire content area. Notice that the «cover» value keeps the aspect ratio, and some part of the background image may be clipped:

Here is the CSS code:

Example

Different Images for Different Devices

A large image can be perfect on a big computer screen, but useless on a small device. Why load a large image when you have to scale it down anyway? To reduce the load, or for any other reasons, you can use media queries to display different images on different devices.

Here is one large image and one smaller image that will be displayed on different devices:

Example

/* For width smaller than 400px: */
body <
background-image: url(‘img_smallflower.jpg’);
>

/* For width 400px and larger: */
@media only screen and (min-width: 400px) <
body <
background-image: url(‘img_flowers.jpg’);
>
>

You can use the media query min-device-width , instead of min-width , which checks the device width, instead of the browser width. Then the image will not change when you resize the browser window:

Example

/* For devices smaller than 400px: */
body <
background-image: url(‘img_smallflower.jpg’);
>

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) <
body <
background-image: url(‘img_flowers.jpg’);
>
>

The HTML

element gives web developers more flexibility in specifying image resources.

The most common use of the

element will be for images used in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.

Example

The srcset attribute is required, and defines the source of the image.

The media attribute is optional, and accepts the media queries you find in CSS @media rule.

You should also define an element for browsers that do not support the

Size an image to a percentage of html window

Is it possible to define an image by a percentage of the document window? It’s nested in several div tags, so it would be to somehow define its height% in reference to the window, rather than its parent tag. In effect, something like this.

4 Answers 4

You can use the viewport’s height and width.

For example, the following class will make the element half the size of the viewport.

This is a pure CSS3 solution, but it has some browser support issues.

Not with CSS, but you could with JavaScript:

I found the best solution for this here. The example given in that article did not work for me when I added an image to the mix. However, I enhanced it creating a «card» layout that works with an image and text.

Adjust course-card-aspect-ratio value to the multiple you desire.

Here is the working fiddle.

Not the answer you’re looking for? Browse other questions tagged html css image or ask your own question.

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.4.16.39093

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

CSS: How can I set image size relative to parent height?

I am trying to figure out how to re-size an image so that it keeps it ratio of width to height, but gets re-sized until the height of the image matches the height of the containing div. I have these images that are pretty large and long (screenshots), and I want to put them into a 200px width, 180px height div for display and without re-sizing the images manually. To make this look good, the sides of the image need to overflow and be hidden with the containing div. This is what I have so far:

HTML

CSS

As you can see, there is grey color showing on the images parent container which should not be shown at all. In order for that container to be filled completely, the width needs to be overflowed equally on both sides. Is this possible? Is it also possible to account for an image that is also too tall?

6 Answers 6

Original Answer:

If you are ready to opt for CSS3, you can use css3 translate property. Resize based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.

Your need, HTML:

And CSS:

Explanation

DIV is set to the relative position. This means all the child elements will get the starting coordinates (origins) from where this DIV starts.

The image is set as a BLOCK element, min-width/height both set to 100% means to resize the image no matter of its size to be the minimum of 100% of it’s parent. min is the key. If by min-height, the image height exceeded the parent’s height, no problem. It will look for if min-width and try to set the minimum height to be 100% of parents. Both goes vice-versa. This ensures there are no gaps around the div but image is always bit bigger and gets trimmed by overflow:hidden;

Now image , this is set to an absolute position with left:50% and top:50% . Means push the image 50% from the top and left making sure the origin is taken from DIV. Left/Top units are measured from the parent.

Magic moment:

transform: translate(-50%, -50%);

Now, this translate function of CSS3 transform property moves/repositions an element in question. This property deals with the applied element hence the values (x, y) OR (-50%, -50%) means to move the image negative left by 50% of image size and move to the negative top by 50% of image size.

Eg. if Image size was 200px × 150px, transform:translate(-50%, -50%) will calculated to translate(-100px, -75px). % unit helps when we have various size of image.

This is just a tricky way to figure out centroid of the image and the parent DIV and match them.

Apologies for taking too long to explain!

Automatically resize images with browser size using CSS

I want all (or just some) of my images getting resized automatically when I resize my browser window. I’ve found the following code — it doesn’t do anything though.

HTML

CSS

How can I basically have a fullscreen design (with background-size: cover ) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?

4 Answers 4

To make the images flexible, simply add max-width:100% and height:auto . Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.

and then any images you add simply using the img tag will be flexible

JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I’ve tested).

image container

Scaling images using the above trick only works if the container the images are in changes size.

The #icons container uses px values for the width and height. px values don’t scale when the browser is resized.

Solutions

Use one of the following approaches:

1. Define the width and/or height using % values.
2. Use a series of @media queries to set the width and height to different values based on the current screen size.

This may be too simplistic of an answer (I am still new here), but what I have done in the past to remedy this situation is figured out the percentage of the screen I would like the image to take up. For example, there is one webpage I am working on where the logo must take up 30% of the screen size to look best. I played around and finally tried this code and it has worked for me thus far:

That being said, this will change all of your images to be 30% of the screen size at all times. To get around this issue, simply make this a class and apply it to the image that you desire to be at 30% directly. Here is an example of the code I wrote to accomplish this on the aforementioned site:

the CSS portion:

the HTML portion:

Alternatively, you could place ever image you hope to automatically resize into a div of its own and use the class tag option on each div (creating now class tags whenever needed), but I feel like that would cause a lot of extra work eventually. But, if the site calls for it: the site calls for it.

Changing image sizes proportionally using CSS

I have been trying for a couple of days now to configure my thumbnail gallery so all the images appear the same height and width. However, when I change the CSS code to,

I get images that are all the same size, but the aspect ratio is stretched, ruining the images. Is there not a way to resize the image container and not the image instead? Allowing me to keep the aspect ratio, but resize the image still. (I don’t mind if I cut off some of the image.)

9 Answers 9

This is a known problem with CSS resizing. Unless all images have the same proportion, you have no way to do this via CSS.

The best approach would be to have a container, and resize one of the dimensions (always the same) of the images. In my example I resized the width.

If the container has a specified dimension (in my example the width), when telling the image to have the width at 100%, it will make it the full width of the container. The auto at the height will make the image have the height proportional to the new width.

HTML:

CSS:

You need to fix one side (for example, height) and set the other to auto .

That would scale the image based on one side only. If you find cropping the image acceptable, you can just set

to the parent element, which would crop out anything that would otherwise exceed its size.

You can use the object-fit CSS 3 property. Something like:

It is not exactly your answer, though, because it doesn’t stretch the container. But it behaves like the gallery and you can keep styling the img itself.

Another drawback of this solution is still a poor support of the CSS 3 property. More details are available here: CSS 3 Object-fit Polyfill. A jQuery solution can be found there as well.