How to implement adaptive image size using CSS Viewport units vmin and vw

How to use CSS Viewport units vmin and vw to implement adaptive image size

In web design, we often encounter situations where images need to adapt to the screen size . To achieve this goal, CSS provides a powerful unit - the viewport unit. where vmin represents the percentage of the smaller of the viewport width and vw represents the percentage of the viewport width.

So, we can use these two units to achieve the effect of adaptive image size. The specific implementation method will be introduced below, as well as the corresponding code examples.

1. Use vmin to set the width and height of the image

First, we need to give the image a fixed aspect ratio, and then use vmin units to set the width and height of the image. The following is a simple example:

<style>
    .image-container {
        width: 90vmin;
        height: 90vmin;
        max-width: 90vw;
        max-height: 90vw;
    }

    .responsive-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>

<div class="image-container">
    <img class="responsive-image lazy"  src="/static/imghwm/default1.png"  data-src="example.jpg"  alt="Example Image">
</div>

In the above code, .image-container is a div that wraps the image. The width and height are set to 90vmin in the style, thus ensuring the width and height of the image. The ratio remains unchanged. .responsive-image is the class of the image. By setting the width and height to 100%, the image fills the entire container. The object-fit: cover; attribute allows the image to completely fill the entire container without deformation.

2. Use vw to set the width of the picture

Another method is to use the vw unit to directly set the width of the picture, but it should be noted that this method may cause the picture to The aspect ratio is unbalanced. The following is a sample code:

<style>
    .responsive-image {
        width: 90vw;
        max-width: 100%;
        height: auto;
    }
</style>

<img class="responsive-image lazy"  src="/static/imghwm/default1.png"  data-src="example.jpg"  alt="Example Image">

In the above code, the .responsive-image class directly sets the width to 90vw. The max-width: 100% attribute can ensure that the image will not exceed the viewport on a small screen. mouth. height: auto allows the height of the image to automatically adjust according to changes in width, maintaining the original aspect ratio.

Summary

The above is a method to implement adaptive image size using CSS Viewport units vmin and vw. By rationally using these two units, we can easily make images automatically adapt to different sizes on different screens and improve the user experience of web pages. If you use this method, please adjust it according to the actual situation and pay attention to compatibility. Hope this article helps you!

The above is the detailed content of How to implement adaptive image size using CSS Viewport units vmin and vw. For more information, please follow other related articles on the PHP Chinese website!