Question

http://www.bootply.com/NvzXHCBGk7

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

<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;
}

Answer 1

你可以这样做

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

Answer 2

试试这段代码

.item img {
width:100%;
}

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

Answer 3

你可以继承父div的宽度/高度属性来获得这个

img {
    width: inherit;
    height: inherit;
}

Answer 4

这是答案。尝试运行SNIPPET

＆＃13;

*, *: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;
}

＆＃13;

<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>

＆＃13;

只需将属性附加到Image即可如

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

Answer 5

我相信这就是你想要的。用评论new标记css，这样你就知道我添加了什么。你刚刚为img选择了错误的父div。它本来应该是well而不是item。

＆＃13;

*, *: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;
}

＆＃13;

<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>

＆＃13;

Answer 6

你必须删除＆＃34; max-height：200px;＆＃34;在.well类

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

并需要添加＆＃34; img-responsive＆＃34; img标签中的类

Demo Link

Answer 7

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

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

如果图像小于添加

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

bootstrap也提供了class =＆＃34; img-responsive＆＃34;对于img标签

Answer 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网站上删除了这个文本。

希望能帮助你。

Answer 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%;
}

不能让图像适合div

9 个答案: