Make an Image Responsive... Isn't this challenge wrong?

HTML-CSS
1

Regarding Responsive Web Design Principles: Make an Image Responsive

The explanation and solution to this challenge seems wrong, but this isn’t the only time I’ve heard the max-width: 100% thing in relation to responsive images. I must have a misunderstanding about the topic. Can someone help me understand this better?

As I understand the goals behind Responsive Web Design we wan’t our images and content to respond to the size of the viewport. This usually refers to the size of either the browser window or the screen of a mobile device.

The challenge:

Add style rules for the img tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio.

The code of an accepted answer:

img {
  max-width: 100%;
  display: block;
  height: auto;
}

Why I don’t think this is responsive:

  • Using max-width: 100%, the image only responds to the viewport size if it’s really small (250px in this case… narrower than the first iPhone).
  • Using display: block is pointless. An inline image can be responsive as well as a block-level element.
  • Using height: auto is the default. It has no effect.

A real responsive image should change size based on the size of the viewport, shouldn’t it? All that we should need to make an image responsive is a width value that’s based on the width of the viewport using either a percentage or a vw unit. Then max width and min-width could be used to prevent the image from getting too big or too small as it seems the properties are intended to do.

I created a demo of what I think is a correct example of a responsive image at CodePen.

2

There are more then one way to do things and fcc is just one way. It depends what effect do you want the image. the intention of max-width is to keep images keep its original intended size while not breaking when the view port is smaller then the image. I don’t find the quality of i an 250px image stretched to 420 acceptable in real advertisement/business.

3

Responsive design is about more than just sizing elements in response to the viewport width. We may want to rearrange elements to make a site easier for people to use on phones, for instance. Because of this, images should respond to their parent container rather than the viewport.

1 Like
4

@PeterWebDev How does the accepted answer work as a way to present a responsive image? None of the properties do anything. If the provided image was significantly wider, the max-width would keep it from getting cut off on small screens, but the other two properties don’t do anything at all.

5

@PortableStick I realize that responsive design can be a complex concept, but I’m not really talking about the whole concept. I’m just talking about this one challenge. The only container here is the <body> and, using the accepted solution, the image doesn’t respond to it.

I could make that frame smaller than 250px and see that it doesn’t get cut off like it would otherwise, but there’s no realistic situation in which we’d have a viewport that small.

I understand how the max-width could be useful in a smaller containing block, but that doesn’t explain its purpose here and I don’t get the purpose of the other two properties at all.

6

It does, though. You even say so yourself:

The purpose is to teach a concept in isolation. Even if you disagree with the properties specified, it’s hardly “wrong”.