0

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

浏览器最大化时一切正常（我使用的是 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 我绝对可以清理一下。

4

4 回答 4

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>

于 2018-06-20T07:08:09.477 回答
0

您可以使用移动媒体查询 100% 的图像宽度。

@media (max-width: 575px) {
.img-fluid{width:100%;}
}
于 2018-06-20T06:54:19.567 回答
0

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

于 2018-06-20T06:33:38.593 回答
0

改为使用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>

于 2018-06-20T06:37:29.047 回答