default
menu home
Icon library Sign up Login favorite_border message help_outline
Online notes - online bookmark

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

styleTags: All CSS html javascript php/other IT
by: fanshome  2023-06-03 06:06(UTC)

Demo

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

注意:部分浏览器(比如微软的edge)不支持AVIF格式图片,所以演示时无法显示图片。

CSScontent_copyCopy codes
img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
htmlcontent_copyCopy codes
	<img src="/images/coding/demo_1920x1080.avif" alt="自适应图片示例">

visibility 1016


- for heavy web user Online notes
adimg
logo Post a comment

captcha
Please check the captcha code
Cancel