Question

我正在制作新闻博客。我已经创建了我的主要文章卡片。卡片的左侧有一张图片，卡片的主要内容包括标题，简要说明，作者和日期。

当浏览器最大化时，一切正常（我在13英寸笔记本电脑上）。当我开始调整浏览器的大小并使其缩小时，一切都开始中断。图像不会占据整个宽度，并且在其右侧有很多空白。

我尝试将图像宽度设置为100%，但似乎无法解决问题。我不确定是什么问题以及为什么会这样。这些商品卡仅发生这种情况。主页上的所有其他内容即使在较小尺寸的屏幕上也可以正常工作。

如果有时间，您能否解释正在发生的事情以及如何解决此问题？，请谢谢。

屏幕截图：

大屏幕

当我开始调整浏览器窗口的大小并使其缩小时，它会执行以下操作：

最后是手机尺寸的屏幕：

HTML

<div class="card card-article">
        <div class="row no-gutters right-shadow-games">
            <div class="col-auto">
                <img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
            </div>
            <div class="col">
                <div class="card-block">
                    <div class="row">
                        <div class="col-md-12">
                            <h4 class="card-title"><a href="#">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</a></h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-9">
                            <p class="card-author"><a href="#">Author on Sep 29, 2017</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

.card-article {
    margin-top: 2px;
    margin-bottom: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-article .card-title{
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 10px;
    font-size: 18px;
}

.card-article .card-author{
    margin-left: 15px;
    margin-right: 10px;
    color: #8d8d8d;
    font-size: 12px;
    line-height: 1.4;
}

.card-article .card-title a{
    color: black;
    font-weight: 600;
}

.card-article .card-description{
    margin-left: 15px;
    margin-right: 10px;
    color: #8d8d8d;
    font-size: 14px;
    line-height: 1.4;
}

为了提供凌乱的CSS，我肯定可以对其进行一点清理。

Answer 1

此处，图像将按照100%的介质宽度调整为640px的宽度。我认为最好将图像大小更改为更大的图像（按100％宽度点）以获得最大的图像清晰度。

.card-article {
  margin-top: 2px;
  margin-bottom: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-article .card-title {
  margin-top: 15px;
  margin-left: 15px;
  margin-right: 10px;
  font-size: 18px;
}

.card-article .card-author {
  margin-left: 15px;
  margin-right: 10px;
  color: #8d8d8d;
  font-size: 12px;
  line-height: 1.4;
}

.card-article .card-title a {
  color: black;
  font-weight: 600;
}

.card-article .card-description {
  margin-left: 15px;
  margin-right: 10px;
  color: #8d8d8d;
  font-size: 14px;
  line-height: 1.4;
}

.article-tag.games {
  position: absolute;
  left: 10px;
  top: 10px;
  background: red;
  padding: 2px 5px;
  color: white;
  border-radius: 4px;
}

.col-auto img {
  max-width:200px;
}

@media (max-width: 640px) {
.col-auto {
  width:100%;
  max-width:100% !important;
}
.col-auto img {
  width:100%;
  max-width:100%;
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<div class="card card-article">
  <div class="row no-gutters right-shadow-games">
    <div class="col-auto">
      <img alt="" class="img-fluid" src="//placehold.it/640x640"> <a class="article-tag games" href="#">Games</a>
    </div>
    <div class="col">
      <div class="card-block">
        <div class="row">
          <div class="col-md-12">
            <h4 class="card-title"><a href="#">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</a></h4>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-9">
            <p class="card-author"><a href="#">Author on Sep 29, 2017</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

正在发生的事情是您的图片正好是200x200px，因此当页面更改形状时它无法拉伸。您可以找到其他图像（我不建议这样做-只是将其放到那里），也可以尝试在可变宽度的设备上添加对另一个样式表的媒体查询，然后在这些设备上重置高度/宽度。

Answer 3

使用col-md-4来对div图像进行包裹，而不是col-auto（请参阅fidlle：https://jsfiddle.net/yemd0qnt/3/）

.card-article {
    margin-top: 2px;
    margin-bottom: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.card-article .card-title{
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 10px;
    font-size: 18px;
}

.card-article .card-author{
    margin-left: 15px;
    margin-right: 10px;
    color: #8d8d8d;
    font-size: 12px;
    line-height: 1.4;
}

.card-article .card-title a{
    color: black;
    font-weight: 600;
}

.card-article .card-description{
    margin-left: 15px;
    margin-right: 10px;
    color: #8d8d8d;
    font-size: 14px;
    line-height: 1.4;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="card card-article">
        <div class="row no-gutters right-shadow-games">
            <div class="col-md-4">
                <img alt="" class="img-fluid" src="//placehold.it/200x200"> <a class="article-tag games" href="#">Games</a>
            </div>
            <div class="col">
                <div class="card-block">
                    <div class="row">
                        <div class="col-md-12">
                            <h4 class="card-title"><a href="#">How Did van Gogh’s Turbulent Mind Depict One of the Most Complex Concepts in Physics?</a></h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p class="card-description">Pick the yellow peach that looks like a sunset with its red, orange, and pink coat skin, peel it off with your teeth. Sink them into unripened...</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-9">
                            <p class="card-author"><a href="#">Author on Sep 29, 2017</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 4

您可以使用移动设备媒体查询来获得100％的图像宽度。

@media (max-width: 575px) {
.img-fluid{width:100%;}
}

如何在较小的屏幕上使图像占据100％的宽度？

4 个答案: