如何使图像适合不同的屏幕分辨率？答案

【问题标题】：How to fit images to different screen resolutions?如何使图像适合不同的屏幕分辨率？
【发布时间】：2021-02-16 23:51:28
【问题描述】：

我正在为编程课程做一个特定的项目，关于图片的比例，我在 HTML 方面遇到了一点问题。基本上，我不知道如何使用 CSS 使图片适合不同的屏幕分辨率。我试过 width 和 height: auto;我已经尝试将它们设置为某个 px 值，我尝试过使用绝对位置和相对位置，但我似乎无法让它工作......

我附上一张图片以便更好地理解

还有代码：（忽略外文）

#wrapper{
  margin: 0;
}

#header, #footer{
  display: flex;
}

#buton1, #buton2{
  width: 25em;
  height: 2.5em;
  float: left;
  margin-left: 0.25em;
  background-color: #89cff0;
  border-radius: 25px;
}

#buton1>a, #buton2>a{
  color: black;
  padding: 25px;
  text-align: center;
  vertical-align: middle;
  line-height: 2.5em;
  text-decoration: none;
}

#butoane{
  display: flex;
  padding: 1em;
  justify-content: space-around;
  text-align: center;
}

#titlu1{
  text-align: center;
}

#titlu2{
  text-align: center;
}

#baraj{
  text-align: center;
}

#text{
  text-align: justify;
  padding-left: 5em;
  padding-right: 5em;
  padding-bottom: 2.5em;
}

#introducere{
  text-align: center;
}

    <head>
    <meta charset="utf-8">
    <style type="text/css">



    </style>
    <title>Lacurile de acumulare</title>
    </head>

    <body id="wrapper">
    <header>
    <div id="header"><img src="Poze/apa reverse.jpg"></div>
    </header>
    <div id="butoane">
        <div id="buton1"><a href="Amenajari.html">Folosinte si amenajari hidroenergetice</a></div>
        <div id="buton2"><a href="Lacurile.html">Lacurile de acumulare</a></div>
    </div>
    <br>
    <div id="main">
        <div id="titlu1"><h1>LACURILE DE ACUMULARE</h1></div>
        <div id="titlu2"><h2>GENERALITATI</h2></div>
        <br>
        <div id="baraj"><img src="Poze/baraj.jpg" border="2px"></div>
        <br>
        <div id="text">
            <h3 id="introducere">INTRODUCERE</h3>
            <p>abc</p>
        </div>
    </div>
<footer id="footer"><img src="Poze/apa.jpg"></footer>

【问题讨论】：

签出media queries
没有一张图片完全适合每种类型的设备，因为纵横比不同。 CSS 提供了一些方便的东西来解决这个问题。最值得注意的是 background-size/object-fit: cover - 系统将根据需要在顶部/底部或侧面覆盖给定元素裁剪并包含 - 您将确保看到整个图像的位置，但是根据其纵横比，侧面或顶部/底部可能是空白区域。

标签： html css image resolution

【解决方案1】：

给 img 一个 100% 的max-width，这样它就永远不会大于它的容器

#baraj img {
  max-width: 100%;
}

【讨论】：

我实际引用的图像在页眉和页脚中，“baraj”是另一张与我的问题无关的图片
不如用#header img {} 调用该图像：D
没关系，我已经弄明白了，非常感谢！我在
和
成功了！

【解决方案2】：

试试这个 CSS。

.responsive {
  width: 100%;
  max-width: 100%;
  height: auto;
}

&lt;img src="https://i.picsum.photos/id/848/536/354.jpg?hmac=ON5WKWjXNxJrhQUUhHxB6GPOY0DMCnt8YOXdhbtj6Dg" alt="" class="responsive"&gt;

注意：调整浏览器大小查看效果。

Working Fiddle

【讨论】：