原生Img图片标签图片自适应缩放且不变形
要实现原生img图片标签的图片自适应缩放且不变形，可以通过设置img的width和height属性为百分比值，并且确保图片容器的宽高比与图片本身的宽高比一致。此外，可以使用CSS样式来限制图片的最大宽度和高度，以保证图片不会超出容器。
以下是一个简单的HTML和CSS示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片自适应</title>
<style>
.img-container {
width: 100%; /* 容器宽度为100% */
height: auto; /* 高度自适应 */
overflow: hidden; /* 超出容器的图片部分隐藏 */
text-align: center; /* 图片居中 */
}
img {
max-width: 100%; /* 图片最大宽度为100% */
height: auto; /* 高度自适应 */
display: inline-block; /* 使img可以设置居中对齐 */
}
</style>
</head>
<body>
<div class="img-container">
<img src="path_to_your_image.jpg" alt="描述文字">
</div>
</body>
</html>在这个例子中，.img-container 是图片的容器，它的宽度被设置为100%，高度自适应。img 标签的max-width 和 width 都被设置为100%，这确保图片会根据容器的宽度进行自适应缩放，而height 被设置为auto，保证图片的高度不会超过原始宽高比。通过这种方式，图片在不同设备上查看时始终保持原始的宽高比，不会变形。
评论已关闭