图片缩小显示是很常见的效果,可以让网页更美观、加载更快。下面介绍一些CSS的属性和代码来实现此效果。
img { max-width: 100%; height: auto; }
上面的代码可以让图片在父容器内占据最大宽度,同时保持原始宽高比例,即高度自适应。
下面是另外一种方式,使用 background-image 属性:
div { background-image: url('img.jpg'); background-size: contain; background-repeat: no-repeat; background-position: center center; }
上述代码会将图片作为 DIV 的背景,并让背景缩放以适应 DIV 的大小,从而缩小显示。
也可以使用 CSS 的 transform 属性来缩小图片:
img { transform: scale(0.5); /* 缩小为原来的 50% */ transform-origin: top left; /* 设置缩放基准点为左上角 */ }
上面的代码将图片缩小为原来的一半,并设置缩放的基准点为左上角。
总之,可以根据具体情况选择适合的方式来实现图片缩小显示。