css 图片宽高随屏幕大小

CSS技术可以让我们在网页设计中实现很多强大的效果。其中之一就是图片宽高随屏幕大小的自动调整。通过这个特性，我们不再需要手工调整每个图片的大小，而是可以让浏览器根据屏幕尺寸和设备类型来自动设置图片大小。

.img {
  width: 100%;
  height: auto;
}

要实现图片宽高的自动调整，我们需要使用CSS的样式表。下面是一个很简单的示例：

<img class="img" src="photo.jpg" alt="一个照片">

如上所示，在HTML中，我们只需要添加一些CSS类，就可以让图片的宽度自动调整。这里，我们将width属性设置为100%，把图片缩放到和屏幕一样的大小。

为了让图片的高度与宽度比例不失衡，我们设置了height属性为auto。这样，图片的高度将按比例自动调整，以保持和原图相同的长宽比例。

这个方法适用于所有类型的图片，无论是PNG、JPEG、SVG还是其他格式。无论你是在手机上访问网页，还是在电脑上查看，都可以看到完美自适应的图片。

在真实应用中，你还需要调整一些CSS样式来适应不同屏幕尺寸和浏览器窗口大小。通过这种方式，我们可以让网页自动适应不同的屏幕，使得用户无论在哪种设备上查看网页，都可以得到最佳的用户体验。

总之，通过使用CSS技术，我们可以实现图片宽高自动适应屏幕大小的效果，使得网页在不同设备上获得最佳的用户体验。这种技术已经成为网页设计中必不可少的一部分，对于开发者和用户都是非常方便和实用的。