default
menu home
图标库 注册 登录 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 1173


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

captcha
请正确填写验证码
取 消