使用 bootstrap、css 和 angularjs 控制图像大小

Question

我对 Web 开发有点陌生，无法弄清楚如何限制图像的大小。

我正在尝试使用引导程序创建一张卡片，我正在使用引导程序行类并将我的卡片分成两部分（col-md-3 和 col-md-6）——一个用于图像，另一个用于数据，我有未知规格的图像。 我期望图像应该占据 col-md-3 中可用的整个空间（高度恒定为 200px），并且在 sm 和 xs 大小中它应该占据整个行。 如果图像拉伸，我没有问题。

这里是代码 sn-p。 https://jsfiddle.net/nLndf1rm/

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<ul>
  <li>
    <div class="card" style="background-color: grey; float: left; margin: 15px">
      <div class="row">
        <div class="col-md-3">
          <img style="width: 100%; width: 250px; height: 180px ;display: block; float: left" src="https://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg" alt="Card image cap">
        </div>
        <div class="col-md-9">
          <h6>A
                        Bishop Javier Echevarría, Leader of Opus Dei, Dies at 84
                    </h6>
          <div>
            <p style="color: black;">
              Bishop Echevarría was the prelate of Opus Dei, the disciplined and influential global Roman Catholic organization, since 1994.....
              <br/>
            </p>
          </div>

        </div>
      </div>
    </div>
  </li>
</ul>

请帮助我。我不介意为此重写整个代码。

Answer 1

也许你只是需要

.col-md-3 img{
  max-width: 100%;
  width: 100%;
  height: 200px;
}

并确保删除 img 的内部 css

.col-md-3 img{
  max-width: 100%;
  width: 100%;
  height: 200px;
}

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<ul>
    <li>
        <div class = "card" style = "background-color: grey; float: left; margin: 15px">
            <div class = "row">
                <div class = "col-md-3" >
                    <img src = "http://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg"
                         alt = "Card image cap">
                </div>
                <div class = " col-sm-9 col-md-9">
                    <h6>A
                        Bishop Javier Echevarría, Leader of Opus Dei, Dies at 84
                    </h6>
                    <div>
                        <p style = "color: black;">
                            Bishop Echevarría was the prelate of Opus Dei, the disciplined and influential global Roman Catholic organization, since 1994.....
                            <br/>
                        </p>
                    </div>
                    
                </div>
            </div>
        </div>
    </li>
</ul>

Answer 2

从您的图像样式中删除它：float:left;width:250px;

为您的图像更新 css 将是

img{
  width: 100%;
  height: 180px ;
  display:block;
 }

Answer 3

      <img style="width: 100%; display: block; float: left" src="https://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg" alt="Card image cap">

只需删除宽度和高度，在 img 标签中只保留宽度 100%。希望这会奏效

Answer 4

为什么要在可以填充的时候拉伸图像，只需使用下面的代码，

 .col-md-3 img{
    max-width: 100%;
    width : 100%
  }
 .col-md-3 {
    height :200px;
    overflow: hidden;
  }

另外，请从 img 标签中删除您的内联 css。 它会为你工作，祝你好运:)

Answer 5

您正在使用引导框架，所以我只是在行前添加容器。我不知道你为什么使用列表元素。无论如何，只需像我在下面那样设置图像样式，也许这样可以得到你的答案。默认情况下，引导程序已经有一个用于 img 标签的 img 响应类。祝你好运并尝试避免使用内联 CSS 而且我还删除了您为 p 元素设置的 div

    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<ul style="padding:0;">
  <li style="list-style:none;">
    <div class="card" style="background-color: grey;">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-3 col-xs-12 " style="padding:0;">
            <img style="width:100%; margin:0 auto; display:block; height:auto;" src="http://static01.nyt.com/images/2016/12/15/world/15echevarria-obit/15echevarria-obit-articleLarge.jpg" alt="Card image cap">
          </div>
          <div class=" col-xs-12 col-md-9">
            <h6>A
                        Bishop Javier Echevarría, Leader of Opus Dei, Dies at 84
                    </h6>

            <p style="color: black;">
              Bishop Echevarría was the prelate of Opus Dei, the disciplined and influential global Roman Catholic organization, since 1994.....
              <br>
            </p>

          </div>
        </div>
      </div>

    </div>
  </li>
</ul>