css不同尺寸调用图片

CSS 是我们经常用来美化网页的一种语言，其中非常重要的一点就是图片的使用。在网页中，不同的图片有不同的尺寸，如何在 CSS 中调用这些不同尺寸的图片呢？下面就来介绍一下。
首先，我们需要在 HTML 中添加图片的代码：

<img src="example.jpg" alt="example"> 

其中 `src` 表示图片的路径，`alt` 是图片的文字描述。我们可以通过 CSS 来调整图片显示的宽度和高度，比如：

img {
  width: 500px;
  height: 300px;
} 

以上代码表示将所有图片的宽度设置为 500 像素，高度设置为 300 像素。但是，这并不适用于所有图片，因为有些图片可能尺寸过小或太大，调整后会出现模糊或失真的情况。
为了避免这种情况，我们可以通过媒体查询（Media Queries）来调节不同尺寸的图片。比如，我们可以这样写：

img {
  width: 100%;
  height: auto;
}
<br>
@media screen and (min-width: 500px) {
  img {
    width: 500px;
    height: auto;
  }
}
<br>
@media screen and (min-width: 768px) {
  img {
    width: 768px;
    height: auto;
  }
} 

以上代码表示在屏幕尺寸大于等于 500 像素时，将图片的宽度设置为 500 像素，高度自适应；在屏幕尺寸大于等于 768 像素时，将图片的宽度设置为 768 像素，高度自适应。这样就可以有效减少图片失真和模糊的情况了。
总之，调用不同尺寸的图片需要根据具体情况进行选择，使用媒体查询可以更好地适应不同的屏幕和设备。通过合理地使用 CSS，让我们的网页更美观、更完美！