无法让图像适合 div答案

【问题标题】：can't get image to fit inside a div无法让图像适合 div
【发布时间】：2015-12-23 03:47:50
【问题描述】：

http://www.bootply.com/NvzXHCBGk7

我试图让<img > 适合它所在的 div，但不能。如何让 img 与“井”的大小相同？

<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
  <div class="row">
    <div class="item">
      <div class="well">
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
  </div>
</div>

css;

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 

}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.item img {

}

.well {
 position:relative;
 display: block;
 max-height: 200px;
}

【问题讨论】：

您希望它保持纵横比吗？因为如果没有，您可以将其高度和宽度设置为 100%，然后使用 well 类 div 的高度和宽度对其进行操作。如果你这样做，你需要做一些不同的事情，但如果你不需要它，我不会解释。

标签： html css

【解决方案1】：

你可以这样做

.item img {
width: 100%;
height:100%;
}

【讨论】：

【解决方案2】：

你可以继承父div的width/height属性来获取这个

img {
    width: inherit;
    height: inherit;
}

【讨论】：

【解决方案3】：

这就是答案。尝试运行代码段

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 

}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

.item img {
  display: block;
  max-width: 100%;
  height: auto;
}

.well {
 position:relative;
 display: block;
 max-height: 200px;
}

<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
  <div class="row">
    <div class="item">
      <div class="well">
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
  </div>
</div>

只是将属性附加到图像作为

.item img {
  display: block;
  max-width: 100%;
  height: auto;
}

【讨论】：

【解决方案4】：

我相信这就是你想要的。用 cmets new 标记 css 所以你知道我添加了什么。您刚刚为 img 选择了错误的父 div。它应该是well，而不是你所拥有的item。

*, *:before, *:after {box-sizing:  border-box !important;}


.row {
 -moz-column-width: 18em;
 -webkit-column-width: 18em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
  
}

.item {
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
}

/*changed item for well class*/
.well img {
    width: 100%; /*new */
    height: 100%;/*new */
}

.well {
 position:relative;
 display: block;
 max-height: 200px;
}

<div class="container">
  <h1>Masonry CSS with Bootstrap</h1>
  <div class="row">
    <div class="item">
      <div class="well">
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
    <div class="item">
      <div class="well">
        2 blah blah blah blah blah blah blah blah blah blah blah blahblah blah blah blah blah blah
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
    <div class="item">
      <div class="well">
        3 blah blah blah blah blah blah blah blah h
        <img src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案5】：

试试这个代码

.item img {
width:100%;
}

请查看此链接https://jsfiddle.net/2x69rr9a/

【讨论】：

【解决方案6】：

如果图像尺寸大于宽度，您可以添加此 css

.item img {
  max-width: 100%;
}

如果图片小于添加

.item img {
  width: 100%;
  max-width: 100%;
}

bootstrap 还为 img 标签提供了 class="img-responsive"

【讨论】：

【解决方案7】：

你必须删除“max-height: 200px;”在 .well 类中

.well {
    display: block;
    /*max-height: 200px;*/
    position: relative;
}

需要在img标签中添加“img-responsive”类

Demo Link

【讨论】：

【解决方案8】：

在你的图片标签上添加这个类：

<img class="img-responsive" src="https://www.petfinder.com/wp-content/uploads/2012/11/dog-how-to-select-your-new-best-friend-thinkstock99062463.jpg">

不要在你的风格上添加更多的 CSS。 Bootstrap 已经为你准备好了。

Bootstrap 3 中的图像可以通过添加 .img-responsive 类。

这适用于 max-width: 100%;, height: auto;并显示：块；到图像，以便它很好地缩放到父元素。

我从 Boostrap 网站上删除了这段文字。

希望对你有所帮助。

【讨论】：

【解决方案9】：

What you have to do is in your css
div.well img {
 width:100%;
 height:100%;
}

但如果不是这样，那意味着将图像与任何 div 匹配

认为这是你的 html，

<div class="imageholder">
  <img clss="imageowner" src=""/>
</div>

然后在你的css文件中

div.imageholder{
 width:400px; /*any width you want*/
 height:400px; /*any height you want */
}

img.imageowner{
 width:100%;
 height:100%;
}

【讨论】：