Question

我正在尝试创建自适应图像，只要我为图片设置高度，它就不再响应。

有没有人可能知道我如何使图像响应但有一个设定的高度，所以它们看起来都很均匀

以下是我的代码链接。

https://jsfiddle.net/eldan88/DTcHh/37485/#&togetherjs=evQgLr6sQz

任何帮助都会非常感激。谢谢！

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

.card {
  /* Add shadows to create the "card" effect */
  border: 1px solid rgba(0, 0, 0, .125);
  transition: 0.3s;
  border-radius: .25rem;
}


/* Add some padding inside the card container */

.card-container {
  padding: 1.25rem;
}

.img-responsive {
  height: 180px !important;
}

＆＃13;

<div class="row">

  <div class="col-sm-3">

    <div class="card">
      <div>
        <img src="https://aspenpeak-magazine.com/get/files/image/migration/11670_content_robert-deniro-aspen-peak-1-1.jpg" class="img-responsive">
      </div>

      <div class="card-container">
        <h4><b>Rober Dinero</b></h4>
        <p>Architect &amp; Engineer</p>
      </div>
    </div>

  </div>
  <div class="col-sm-3">

    <div class="card">
      <div>
        <img src="https://www.biography.com/.image/t_share/MTE1ODA0OTcxODYwOTg1MzU3/mark-wahlberg-9542335-1-402.jpg" class="img-responsive">
      </div>

      <div class="card-container">
        <h4><b>Mark Whalberg</b></h4>
        <p>Architect &amp; Engineer</p>
      </div>
    </div>

  </div>
  <div class="col-sm-3">

    <div class="card">
      <div>
        <img src="http://res.cloudinary.com/wphire/image/upload/c_scale/freelancer_profile_pic_3" class="img-responsive">
      </div>

      <div class="card-container">
        <h4><b>Jonah Hill</b></h4>
        <p>Architect &amp; Engineer</p>
      </div>
    </div>

  </div>
  <div class="col-sm-3">

    <div class="card">
      <div>
        <img src="http://res.cloudinary.com/wphire/image/upload/c_scale/freelancer_profile_pic_4" class="img-responsive">
      </div>

      <div class="card-container">
        <h4><b>Seth Rogan</b></h4>
        <p>Architect &amp; Engineer</p>
      </div>
    </div>

  </div>

</div>

＆＃13;

Answer 1

好的，这就是你想要的！

注意：这是您正在使用的引导类，如果您正确实现了引导程序样式表，那么只需在div上添加正确的类就可以了。

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

.card {
  /* Add shadows to create the "card" effect */
  border: 1px solid rgba(0, 0, 0, .125);
  transition: 0.3s;
  border-radius: .25rem;
}


/* Add some padding inside the card container */

.col-sm-3{
  display: inline-block;
  width: 25%;
  vertical-align: top;
}

.card-container {
  padding: 1.25rem;
}

.img-responsive {
  display: block;
  height:auto;
  max-width: 100%;
}

<div class="row">

  <div class="col-sm-3">

    <div class="card">
      <div>
        <img src="https://aspenpeak-magazine.com/get/files/image/migration/11670_content_robert-deniro-aspen-peak-1-1.jpg" class="img-responsive">
      </div>

      <div class="card-container">
        <h4><b>Rober Dinero</b></h4>
        <p>Architect &amp; Engineer</p>
      </div>
    </div>

  </div>
  <div class="col-sm-3">

    <div class="card">
      <div>
        <img src="https://www.biography.com/.image/t_share/MTE1ODA0OTcxODYwOTg1MzU3/mark-wahlberg-9542335-1-402.jpg" class="img-responsive">
      </div>

      <div class="card-container">
        <h4><b>Mark Whalberg</b></h4>
        <p>Architect &amp; Engineer</p>
      </div>
    </div>

  </div>
  <div class="col-sm-3">

    <div class="card">
      <div>
        <img src="http://res.cloudinary.com/wphire/image/upload/c_scale/freelancer_profile_pic_3" class="img-responsive">
      </div>

      <div class="card-container">
        <h4><b>Jonah Hill</b></h4>
        <p>Architect &amp; Engineer</p>
      </div>
    </div>

  </div>
  <div class="col-sm-3">

    <div class="card">
      <div>
        <img src="http://res.cloudinary.com/wphire/image/upload/c_scale/freelancer_profile_pic_4" class="img-responsive">
      </div>

      <div class="card-container">
        <h4><b>Seth Rogan</b></h4>
        <p>Architect &amp; Engineer</p>
      </div>
    </div>

  </div>

</div>

Answer 2

通过设置一个固定的高度，你就可以得到 - 一个固定的高度，它不再响应。如果您希望图像保持其宽高比，可以在图像元素上使用object-fit: cover。虽然不能在IE和Edge上工作..

添加高度时，Bootsrap图像无响应

2 个答案: