gpt4 book ai didi

html - 如何自动调整移动网站的图像大小?

转载 作者:技术小花猫 更新时间:2023-10-29 11:55:15 24 4
gpt4 key购买 nike

我尝试用谷歌搜索这个,但仍然无法弄清楚如何根据各种移动设备的宽度调整图像的大小。这是我的尝试:

CSS:

img.test {
width: 100%;
height: auto;
}

HTML:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<link rel="stylesheet" href="../includes/style.css">
</head>
<img class="test" src="../includes/foo.jpg">

但图像仍在以其原始缩放比例加载。我是一个 css 和 html 新手,所以任何帮助都会很棒!

编辑:

感谢您的回复。这是现在可以使用的修订版本。

HTML:

   <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<link rel="stylesheet" href="../includes/style.css">
</head>
<body width = "device-width">
<img class="test" src="../includes/buoy_map.jpg">
</body>

最佳答案

img {
max-width: 100%;
}

应该将图像设置为占据其包含元素的 100%。

关于html - 如何自动调整移动网站的图像大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7662064/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com