如何使用 CSS 自动调整图像大小以适应 DIV 容器

2024-07-11 15:18| 来源: 网络整理| 查看: 265

主题:HTML / CSS

答案:使用 CSS max-width 属性

您可以简单地使用 CSS max-width 属性来自动调整大图像的大小，以便它可以适应较小宽度的容器，同时保持其纵横比。

此外，如果您有一个固定高度的 div 元素，您还可以应用 max-height 属性，这样图像就不会从 div 的边界水平或垂直溢出。

示例使用 CSS 按比例调整图像大小 img{ max-width: 100%; max-height: 100%; display: block; /* 删除图片下方的多余空间 */ } .box{ width: 250px; border: 5px solid black; } .box.large{ height: 300px; } .box.small{ height: 100px; } Image inside Auto-height Div Image inside Portrait Div Image inside Landscape Div FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答:

如何使用 CSS 去除图片下方的空白如何在鼠标悬停时为元素添加边框而不影响 CSS 中的布局如何在鼠标悬停时转换图像大小而不影响 CSS 中的布局

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章