[已解决]HTML怎么设置多张图片自适应网页大小

菜菜大大^_^ · 发表于 2024-11-17 13:37:38

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

是这样的
在html中插入了很大像素的图片，怎么把图片等比例缩小？
如何设置图片自适应网页大小而不是按图片的大小撑大网页。

最佳答案

月排行榜 / 总排行榜

一只菜狗

2024-12-2 15:19:48

因为你的容器宽度没有设置具体的宽度，80%他继承了父元素宽度，这里父元素就是浏览器的宽度，如果要自适应的话可以试试媒体查询，配合缩放，另外试试rem，em等等设置具体的宽高等比例缩放图片

跳转到最佳答案楼层

FishC · 发表于 2024-11-17 13:44:20

要让图片在HTML中自适应网页大小，你可以使用CSS来实现图片的等比例缩小。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自适应图片示例</title>
<style>
img {
max-width: 100%; /* 图片最大宽度为容器的100% */
height: auto; /* 高度自动，保持原比例 */
display: block; /* 移除底部的间距 */
}
.container {
width: 80%; /* 容器宽度，可以根据需要调整 */
margin: 0 auto; /* 使容器居中 */
}
</style>
</head>
<body>
<div class="container">
<img src="your-image1.jpg" alt="图片1">
<img src="your-image2.jpg" alt="图片2">
</div>
</body>
</html>

复制代码

### 解释：
1. **`max-width: 100%;`**：这确保了图片不会超过其父容器的宽度，而不是依赖图片的原始尺寸。
2. **`height: auto;`**：这条确保图片在宽度变化时能保持其原有的宽高比例。
3. **`.container`**：这是一个可选的容器，用于限制网页内图片的最大展示宽度，并确保它们居中放置。

把 `<img src="your-image1.jpg">` 中的 `your-image1.jpg` 替换成你实际的图片路径即可。这样设置后，不论图片有多大，它们都能自适应网页大小并等比例缩小。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

一只菜狗 · 发表于 2024-12-2 15:19:48

因为你的容器宽度没有设置具体的宽度，80%他继承了父元素宽度，这里父元素就是浏览器的宽度，如果要自适应的话可以试试媒体查询，配合缩放，另外试试rem，em等等设置具体的宽高等比例缩放图片

菜菜大大^_^ · 发表于 2024-12-4 11:35:36

一只菜狗发表于 2024-12-2 15:19
因为你的容器宽度没有设置具体的宽度，80%他继承了父元素宽度，这里父元素就是浏览器的宽度，如果要自适应 ...

谢谢

菜菜大大^_^ · 发表于 2024-12-4 11:37:02

一只菜狗发表于 2024-12-2 15:19
因为你的容器宽度没有设置具体的宽度，80%他继承了父元素宽度，这里父元素就是浏览器的宽度，如果要自适应 ...

我给图片外加一个div，给div设置宽高，这样如何

一只菜狗 · 发表于 2024-12-13 16:03:39

菜菜大大^_^ 发表于 2024-12-4 11:37
我给图片外加一个div，给div设置宽高，这样如何

已经有父盒子container了，你需要的是了解我说的那个知识点而不是div套div

账号		自动登录	找回密码
密码			立即注册

[已解决]HTML怎么设置多张图片自适应网页大小

马上注册，结交更多好友，享用更多功能^_^

浏览过的版块