Question

所以最近我一直在一个网站上工作，并且希望使其具有响应性，因此我能够使其对所有较小的resolutins都具有响应性，但是我不知道如何使网站上的图像放大

here is how it looks both p1 and logo are images

我尝试了很多互联网上可用的方法，但是没有用

所有图像都在引导容器中

@charset "utf-8";
.columnup {
  padding-left: 10px;
  padding-top: 20px;
}

.columndown {
  padding-left: 10px;
  padding-top: 20px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<body>

  <div class="container">
    <div class="row">
      <div class="column col-md-12 columnup">
        <center><img src="https://image.ibb.co/fESvOL/Group-1.png"></center>
      </div>
    </div>

  </div>
  <center>
    <div class="container">
      <div class="row">
        <div class="column  columnup col-md-4 col-sm-6">
          <img src="https://image.ibb.co/eidfq0/thumbnail-1.png" class="imaget">
        </div>
        <div class="column col-md-4 col-sm-6 columnup">
          <img src="https://image.ibb.co/eidfq0/thumbnail-1.png">
        </div>
        <div class="column col-md-4 col-sm-6 col-sm-offset-3 columnup ">
          <img src="https://image.ibb.co/eidfq0/thumbnail-1.png">
        </div>
      </div>
      <div class="row">
        <div class="column columndown col-md-4 col-sm-6 col-md-offset-2 ">
          <img src="https://image.ibb.co/eidfq0/thumbnail-1.png">
        </div>
        <div class="column columndown col-md-4 col-sm-6 ">
          <img src="https://image.ibb.co/eidfq0/thumbnail-1.png">
        </div>
      </div>
    </div>
  </center>
</body>

这是我的网站的精简版本因此有人可以缩放元素，使其在720p分辨率和1080p分辨率下看起来相似

预先感谢

Answer 1

您正在使用Bootstrap前端框架。 Bootstrap已经有一些预定义的布局断点，特别是.container类，它可以包装图像。

具体来说，根据屏幕尺寸，具有div类的分隔（.container）可以采用以下宽度之一：

Screen size   |   Container size
  <576px      |      auto
  ≥576px      |      540px
  ≥768px      |      720px
  ≥992px      |      960px
  ≥1200px     |      1140px

根据上表，如果屏幕尺寸为.container或更大，则最大宽度div 1140px可以是1200px。

这基本上意味着，如果您使用宽度为1920px的浏览器打开页面，则.container div的宽度将为1140px，位于屏幕中间。 .container内部的图像只能与它们所在的div一样宽，因此它们也被限制为最大1140px。这意味着.container div与屏幕边缘之间将有一些空白。 1920px - 1140px = 780px的空白！

您希望将图像的宽度增加到100%，以便将它们从屏幕的一端正确缩放到另一端，但是您将它们包裹在.container div中，由Bootstrap预先定义为1440px，因此他们将永远无法实现。为了实现该目标，您需要摆脱Bootstrap在1140px .container上设置的div限制。

针对这个问题，实际上有数百种不同的解决方案，您使用哪种解决方案实际上取决于您的设计目标，您对它的定义还不是很好，所以我不能为您提供最合适的解决方案。

最简单，最肮脏的解决方法是在自定义样式表中使用此CSS覆盖Bootstrap类。

@media (min-width: 1200px) {
  .container {
      max-width: 100%;
  }
}

然后，当然，设置图像的样式：

img {
    width: 100%;
}

如何放大HTML和CSS的某些图片

1 个答案: