Home >Web Front-end >CSS Tutorial >How to ensure that the width and height of the image on the page always maintain a ratio of 16:9
How to ensure that the width and height of the image on the page always maintain a ratio of 16:9
- 不言forward
- 2018-10-23 16:25:246126browse
The content of this article is about how to keep the width and height of the picture on the page in a ratio of 16:9. It has a certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .
Goal:
Encountered a requirement to keep the image on the page regardless of how the width changes. The width and height maintain the 16:9 ratio.
Implementation:
Method 1: This is also a more classic method, using padding-bottom to achieve.
<!DOCTYPE html>
<html>
<head>
<title>固定宽高比16:9</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.wrap{
width:100%;
}
/* 16:9宽高比，则设padding-bottom:56.25% */
/* height: 0px,防止矩形被里面的内容撑出多余的高度*/
.box{
width: 100vw;
height: 0px;
position: relative;
padding-bottom: 56.25%;
background: pink;
}
/* 如果需要在div里面设置内容*/
/* 需要设置position：absolute，才能设置内容高度100%和矩形一样 */
/*.box p{
width: 100%;
height: 100%;
position: absolute;
}*/
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<p>这是一个16：9的矩形</p>
</div>
</div>
</body>
</html>
Method 2: Use vmin to achieve it.
<!DOCTYPE html>
<html>
<head>
<title>固定宽高比16:9</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.wrap{
width:100%;
}
/*vmin：相对于可视窗口的宽度或高度中较小的那个，被均分为100单位的vmin*/
/*例：当宽度是300，高度是600，那么50vmin则是相对于宽度的50%*/
.box{
height: 56.25vmin;
background: pink;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<p>这是一个16：9的矩形</p>
</div>
</div>
</body>
</html>
Note: If the screen width is larger and the height is smaller, vmax can be used. If you need to switch at will, you can control it through js.
Summary:
Both methods have their own pros and cons. Method one: has good compatibility, the code is relatively long, and it is more difficult to understand. Method 2: The code is concise and easy to understand after clarifying the definition, but the compatibility is relatively poor. But what about compatibility, so what are you afraid of? Hahaha.
The above is the detailed content of How to ensure that the width and height of the image on the page always maintain a ratio of 16:9. For more information, please follow other related articles on the PHP Chinese website!