In order to make the image adaptively displayed on different devices, the responsive style needs to be set. The core method is to use max-width and height: auto. 1. Set img { max-width: 100%; height: auto; } Let the image automatically scale and maintain proportion according to the parent container width; 2. height: auto Ensure the height is adjusted proportionally to avoid deformation; 3. The parent container should use percentage, max-width, or vw units to match the image response; 4. JavaScript alternatives are available for legacy IE, but modern projects generally do not need to be considered.

When an image is used in a web page, in order to make it appear adaptively on different devices, it is usually necessary to set a responsive style. Using max-width is a simple and effective method.

1. Setting max-width: 100% is the key

To make the image automatically scale without overflowing, the most common thing is to add the image:

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

The advantage of this is that the image will automatically resize based on the width of the parent container while maintaining the original aspect ratio. For example, if you have a container with a maximum width of 800px, put a picture of 1000px wide. On the mobile phone screen, this container may be only 375px, and the picture will automatically shrink to the maximum width suitable for the container and will not break the layout.

2. Cooperate with height: auto maintains proportion

Many people only write max-width: 100% , but if height: auto is not added, the image may deform or the fixed height does not change with width. Setting height: auto ensures that the image's height is scaled to scale.

For example: A 4:3 image becomes smaller in width. If height is fixed to a certain value, the image will be flattened or lengthened. After setting it to auto , the browser will automatically calculate the appropriate height and keep the proportion unchanged.

3. Pay attention to the limitations of the parent container

Even if the image is set with max-width: 100% , the image may not respond correctly if the parent element does not have appropriate width control. for example:

• If the parent element uses a fixed width (such as width: 600px ), the image will also be limited to this width.
• If the parent element is width: 100vw , the image may fill the entire viewport, exceeding the content area.

So suggestion:

• Make sure the parent container has reasonable width settings as well.
• Use percentages, max-width or vw units to define container sizes to avoid rigid fixed values.

4. Compatible with old versions of IE. Be careful

If you also need to support IE8 or earlier, be aware that max-width may not take effect in these browsers. Solutions include:

• Use JavaScript to dynamically control image width.
• Try to guide users to upgrade or use modern browsers.

However, most projects now do not need to be compatible with such an old browser, and this one can be used as a supplementary knowledge to understand.

Basically that's it. max-width: 100% paired with height: auto is the lightest way to implement responsive images. The key is to understand that it depends on the settings of the parent container and cannot work alone.

The above is the detailed content of Making an image responsive with css max-width. For more information, please follow other related articles on the PHP Chinese website!