The height of the div or img image is adaptive to the width, and the divimg width is adaptive.

The height of the div or img image is adaptive to the width, and the divimg width is adaptive.

1. You can use js to determine the image width to obtain a specific value, and then use js to set the Image Height (I will not elaborate on it here ).

One disadvantage of using js is that the image height can be adjusted only when the page is refreshed. It cannot be adaptive as the browser window size changes.

II. I am using css to achieve Adaptive Image Height this time.

The following is the required code.

(This method is used to vertically center text on the top of an image. If you do not need it, you can select the code at the bottom to be concise)

<Div class = "box"> <span> vertical center of row elements </span> <div class = "img-box">  </div> </div>

. Box {width: 50%; margin: 50px auto ;}. img-box {width: 100%; position: relative; z-index: 1 ;}. img-box img {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; margin: auto; z-index:-1; * zoom: 1 ;}. img-box: before {content: ""; display: inline-block; padding-bottom: 100%; width: 0.1px;/* A value is required, otherwise, the height cannot be supported */vertical-align: middle ;}

1. the attribute padding-bottom is described here. When its value is a percentage, it is calculated based on the width of the element. So when it is set to 100%, its height is equal to its own width, forming a square. Of course, this value can be adjusted based on actual conditions.

2. Next, we need to note that the referenced image is laid out by absolute positioning, so that the image can adapt to the size change of its parent element.

Another simple method is to directly add padding-bottom to the parent element of the img.

<div class="img-box"></div>

.img-box{padding-bottom:100%;}.img-box img{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;margin:auto;}

Copyright Disclaimer: This article is an original article by the blogger. If you need to reprint it, please leave a message in the comment area.