为什么自举列中的img行为不起作用？

问题描述：

即使我设置了height和width，番茄图片也比其他人高。我敢肯定这件事情很简单：为什么自举列中的img行为不起作用？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a> 
 
     <div class="caption text-center">Weather App</div> 
 
\t \t </div> 
 
     
 
     <div class="col-md-4"> 
 
     <a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a> 
 
     <div class="caption text-center">Weather App</div> 
 
     </div> 
 

 
     <div class="col-md-4"> 
 
     <a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a> 
 
     <div class="caption text-center">Recipe Book</div> 
 
     </div> 
 
    </div> 
 
</div>

答

，因为你正在使用.img-responsive和.img-thumbnail这两个设置在CSS max-width:100%，因此重写HTML width/height标签

加不使用HTML标签为width/height

与此相同height，你可以做这样的事情（不失宽高比）：

.row img { 
 
    max-height: 120px 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4 col-md-4 text-center"> 
 
     <a href="#"> 
 
     <img src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" class="img-responsive projects img-thumbnail"> 
 
     </a> 
 
     <div class="caption">Weather App</div> 
 
    </div> 
 

 
    <div class="col-xs-4 col-md-4 text-center"> 
 
     <a href="#"> 
 
     <img src="http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg" class="img-responsive projects img-thumbnail"> 
 
     </a> 
 
     <div class="caption">Weather App</div> 
 
    </div> 
 

 
    <div class="col-xs-4 col-md-4 text-center"> 
 
     <a href="#"> 
 
     <img src="http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg" class="img-responsive projects img-thumbnail"> 
 
     </a> 
 
     <div class="caption">Recipe Book</div> 
 
    </div> 
 
    </div>

非常感谢，并感谢您修复我的标题。我看到你对宽高比的意思，因为我增加了最大宽度，试图使它们完全相同的尺寸，并重新调整，所以它们甚至不是。我最终在CSS和max-height中使用了高度和宽度，并且它似乎也可以工作，只是延伸。如果在使用bootstrap的css中高度超过最大高度的优势，请告诉我。 –

答

我认为这是自举的响应图像与它搞乱。覆盖它在CSS像这样

img { 
    width: 230px !important; 
    height: 230px !important; 
}

Fiddle

答

设置在CSS定制宽度和高度像这样引导覆盖：

.img-thumbnail{ 
    width: 230px; 
    height:230px; 
}

您的代码会使列无效，因为宽度是绝对的。 –

我结束了与dippas的反应。谢谢！ –

答

我会建议从使用<img>更改为使用图像作为背景。 Bootstrap不是一切，如果没有合适的话，你仍然可以添加你自己的样式。

背景是好的，因为你可以修剪掉两端，它不会拉伸图像。

.projects.img-thumbnail[style] { 
 
    width:100%; 
 
    height:200px; 
 
    background-size:cover; 
 
    background-position: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
    <a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg)" class="img-responsive projects img-thumbnail"></span></a> 
 
    <div class="caption text-center">Weather App</div> 
 
    </div> 
 

 
    <div class="col-xs-4"> 
 
    <a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg)" class="img-responsive projects img-thumbnail"></span></a> 
 
    <div class="caption text-center">Weather App</div> 
 
    </div> 
 

 
    <div class="col-xs-4"> 
 
    <a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg)" class="img-responsive projects img-thumbnail"></span></a> 
 
    <div class="caption text-center">Recipe Book</div> 
 
    </div> 
 
</div>

但据我所知，目前还使其成为一个正方形，除了涉及::before或::after伪选择的没有简单的方法。

为什么自举列中的img行为不起作用？

相关推荐