Question

我正在Codecademy从事Colmar大学的作业。我正在使用34英寸显示器测试该网站，并通过放大/缩小窗口来检查该网站在所有屏幕宽度下的行为都很好。

将窗口增大到大约宽度时。横幅图像超过1900像素时，像素图像停止增大。

我认为这是由图片的尺寸（1104x816）引起的。带有图片的横幅部分的最大宽度为60％。

我知道可以通过增加图片的原始尺寸来解决该问题，从而使其尺寸继续增加。

我的问题是：这是这样做的方法还是有更好的方法？

第一次尝试flex-grow：1。

然后尝试使用图像作为背景图像将其清空，但这给我带来了高度问题，我似乎记得不要使用empty的

然后调整图片的原始尺寸，以适应较大的屏幕尺寸。那行得通，但不确定是否有更好的方法。

HTML 5:
<div class="banner">
  <div class="banner-img-container">
    <img src="./images/banner.jpg" alt="students learning">
  </div>

  <div class="banner-text-container">
    <h1>Learn something new everyday</h1>
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <div class="banner-button">
      <p><a href="#">Start here</a></p>
    </div>
  </div>
</div>

CSS:
.banner {
    display: inline-flex;
    flex-wrap: wrap;
    background-color: #e2e2e2;
}

.banner-img-container {
    padding: 32px 24px;
    max-width: 60%;
    flex-grow: 1;
}

.banner-img-container img {
    max-width: 100%;
}

.banner-text-container {
    padding: 32px 24px;
    max-width: 40%;
    display: inline-flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}

Answer 1

您可以通过调整宽度并相应调整高度来扩展图像的大小。

img { width: 100%; height: auto; }

.banner {
    display: inline-flex;
    flex-wrap: wrap;
    background-color: #e2e2e2;
}

.banner-img-container {
    padding: 32px 24px;
    max-width: 60%;
    flex-grow: 1;
}

.banner-img-container img {
    width: 100%;
    height: auto;
}

.banner-text-container {
    padding: 32px 24px;
    max-width: 40%;
    display: inline-flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
}

<div class="banner">
  <div class="banner-img-container">
    <img src="https://via.placeholder.com/1104x816" alt="students learning">
  </div>

  <div class="banner-text-container">
    <h1>Learn something new everyday</h1>
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
    <div class="banner-button">
      <p><a href="#">Start here</a></p>
    </div>
  </div>
</div>

Answer 2

您可以使用纯CSS属性来代替使用<img>标签：

.banner{
    background-img: url("./images/banner.jpg");
    background-size: contain;
}

有关CSS背景的更多信息，请参见here。

如何缩放超出其原始尺寸的图像

2 个答案: