html css3不拉伸图片显示效果

There are a few different ways to achieve a "no stretch" image display effect using HTML and CSS3. Here are a few of the most common methods:

1. Using the max-width and max-height properties:

This is a common approach to control the maximum size of an image while maintaining its aspect ratio. The max-width property sets the maximum width of the image, and the max-height property sets the maximum height. The image will only scale down to fit within these dimensions, and it will never be stretched larger.

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

2. Using the object-fit property:

The object-fit property is a CSS3 property that specifies how an image should be scaled to fit its container. The following values are commonly used:

• contain: The image will be scaled down to fit its container while maintaining its aspect ratio. It will never be stretched larger.
• cover: The image will be scaled to cover its container, filling the entire space. The aspect ratio may be preserved or not, depending on the image size and container dimensions.
• none: The image will not be scaled, and it will be displayed at its original size. If the image is larger than its container, it will be clipped.

img {
  object-fit: contain;
}

3. Using background images:

You can also use CSS background images to display images without stretching. This can be useful for creating responsive images that scale well on different screen sizes.

.container {
  background-image: url('image.jpg');
  background-size: contain;
  background-position: center;
}

Additional considerations:

• Image dimensions: It's important to consider the original dimensions of the image when using these techniques. If the image is already smaller than its container, it will not be scaled up.
• Image quality: Scaling down images can reduce their quality. If you need to maintain high image quality, you may want to consider using a different technique, such as lazy loading or image optimization.

Here are some additional resources that you may find helpful:

• CSS Tricks: Serving Images [移除了无效网址]
• MDN: object-fit
• W3Schools: max-width
• W3Schools: max-height [移除了无效网址]