default
menu home
arrow_drop_down
图标库 注册 登录 favorite_border message help_outline
在线笔记 - 人性化网络收藏夹

一个使用CSS/HTML将图像自适应屏幕的示例

style分类标签： 全部 CSS html javascript php/other IT
by: fanshome  2023-06-03 06:06(UTC)
演 示

在这个示例中，我们将图像的最大宽度设置为100%，并将高度设置为自动。此外，我们还添加了一个样式，以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能适当地缩放，不会失真或拉伸。

注意：部分浏览器（比如微软的edge）不支持AVIF格式图片，所以演示时无法显示图片。

CSScontent_copy复制代码
img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
htmlcontent_copy复制代码
	<img src="/images/coding/demo_1920x1080.avif" alt="自适应图片示例">

visibility 867

- 重度网络用户必备 在线笔记
adimg
logo 发表评论

captcha
请正确填写验证码
取 消