如何使图像适应不同的屏幕分辨率？

编程问答 2022-05-25

问题描述

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

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

I'm attaching a picture for better understanding

和代码：（忽略外语）

#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>

解决方法

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

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

试试这个 CSS。

.responsive {
  width: 100%;
  max-width: 100%;
  height: auto;
}
<img src="https://i.picsum.photos/id/848/536/354.jpg?hmac=ON5WKWjXNxJrhQUUhHxB6GPOY0DMCnt8YOXdhbtj6Dg" alt="" class="responsive">

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

Working Fiddle

htmlimageimageimageresolutionresolution