Question

我有3个图像以及如何缩放此图像，而不是缩小浏览器的大小。如何使图像更小，使我的浏览器更小？我试试这个，但它不起作用：

HTML

   <div class="main">
      <div class="submain">
        <div class="iner">
          <img src="img/sample1.png" alt="" />
        </div>
        <div class="iner1">
          <img src="img/sample2.png" alt="" />
        </div>
        <div class="iner2">
          <img src="img/sample3.png" alt="" />
        </div>
      </div>
    </div>

CSS

.main{
  position:relative;
  height: 500px;
  width: 1000px;
  background-color: #111210;
}


.iner img{
  position: absolute;
  width: 600px;
  height: 350px;
  background-color: #34cb2f;
  bottom: 0;

  left:50%;
  z-index: 5;
  transform: translateX(-50%); -webkit-transform: translateX(-50%);
}

.iner1 img{
  position: absolute;
  width: 600px;
  height: 270px;
  background-color: #34cb2f;
  bottom: 0;

  right: 5%;
  transform: translateX(-50%); -webkit-transform: translateX(-50%);
}

.iner2 img{
  position: absolute;
  width: 600px;
  height: 270px;
  background-color: #34cb2f;
  bottom: 0;

  left: 65%;
  transform: translateX(-50%); -webkit-transform: translateX(-50%);
}

.submain{
  width: 800px;
  height: 200px;
  background-color: rgba(38, 118, 212, 0.51);
}

这适用于最小宽度小于400px的比例图像：

@media screen and (min-width: 400px) {
  .submain{
    width: 75%;
  }
}

但是这个媒体规则不起作用，也许我做错了什么，请帮我理解。谢谢！

Answer 1

媒体查询应该有效（我认为），但由于img具有固定的宽度，它们只是溢出。

你也应该使用百分比宽度。请记住，如果您设置宽度或高度，则另一个维度将按比例缩放。

Answer 2

如果要在宽度小于400px时缩放图像，则需要将@media屏幕和（最小宽度：400px）更改为@media屏幕和（max-width：399px）

提示：设置图像比例的一种方法是设置img max-width：100％。然后，如果在调整浏览器宽度时图像周围的div变小或变大，图像将随之缩放。

以下是一篇可能对您有所帮助的帖子： Make an image responsive - simplest way

Answer 3

＆＃39;正确＆＃39;解决方案很大程度上取决于您网站的背景。您可以采取几种方法来实现它。

一个是，只是给你的图像相对尺寸（％，em，or one of the new units像rem，vh，...）。这会根据周围元素（以及浏览器）的大小自动缩放它们。

另外，除非您的布局确实需要它，否则我通常只定义一个维度（宽度或高度）。这样浏览器会自动保留图像的纵横比。

Answer 4

将您的图片作为background应用于div类，并使用background-size进行相应缩放。

Answer 5

vh无论是放置在图像本身还是放置在包含元素上，都会根据视口的高度缩放图像。

但是，如果有的话，它在宽度上的工作方式却完全相同。你的形象会相对较好地扩展，但它会与壁龛斗争，尽管我承认它们非常罕见。

%会根据容器的相对百分比来缩放图片，无论是您的网页正文还是相应的div - 在您的情况下，.iner 。这样做的问题在于，这与.iner从.submain继承的百分比和.submain在.main中的百分比相同。育儿和百分比绝不是最好的一对。

（蓝色为%，黑色为vh）

如何用css缩放图像

5 个答案: