twitter-bootstrap Bootstrap 媒体对象图像调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23283585/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Media Object Images resizing
提问by user3408293
I am having a problem with my images in my grid layout with Bootstrap. I am trying to replicate the middle section of the home page of http://riotdesign.eu/en/as an exercise.
我在使用 Bootstrap 的网格布局中遇到图像问题。我正在尝试复制http://riotdesign.eu/en/主页的中间部分作为练习。
My images will pull left and the height remains fixed at 150px and the width gets cut off so the image looks skinny and not very good. I inspected the other websites code and they somehow have a 150x150 image that is 130X130 in md grid layouts and 108x108 in small grid layout. How can I achieve this?
我的图像将向左拉，高度保持固定在 150 像素，宽度被切断，因此图像看起来很瘦而且不太好。我检查了其他网站的代码，它们以某种方式有一个 150x150 的图像，在 md 网格布局中为 130x130，在小网格布局中为 108x108。我怎样才能做到这一点？
I am guessing that 130 is the default width for the med container at their specified sm-5 grid selection. so that is why they chose to resize that way, is that correct? I have not been able to replicate this despite my best efforts. Here is my code.
我猜 130 是 med 容器在其指定的 sm-5 网格选择中的默认宽度。所以这就是他们选择以这种方式调整大小的原因，对吗？尽管我尽了最大的努力，但我还是无法复制这一点。这是我的代码。
<div class="row index-row">
<div class="col-sm-4 index-left">
<div class="media-background">
<div class="row index-row">
<div class="media col-sm-5 col-md-4">
<div class="image-overlay">
<a class="btn btn-default href="#">Open</a>
<%= image_tag('computer.jpg', class: 'pull-left media-img', alt: 'About') %>
</div>
</div>
<div class="media-body col-sm-7 col-md-8">
<h4>
<%= link_to 'About', root_path, class: 'media-heading' %>
</h4>
<p class="heading-text">
"ABOUT What is Riot Design, our our clients and our specialties."
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4 index-middle">
<div class="media-background">
<div class="row index-row">
<div class="media col-sm-5 col-md-4">
<a class="pull-left" href="">
<%= image_tag('notebook.jpg', class: 'media-img', alt: 'Portfolio') %>
</a>
</div>
<div class="media-body col-sm-7 col-md-8">
<h4>
<%= link_to 'Portfolio', root_path, class: 'media-heading' %>
</h4>
<p class="heading-text">
PORTFOLIO Web design, app design, print works and photography
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4 index-right">
<div class="media-background">
<div class="row index-row">
<div class="media col-sm-5 col-md-4">
<a class="pull-left" href="">
<%= image_tag('building.jpg', class: 'media-img', alt: 'Contacts', type: 'button') %>
</a>
</div>
<div class="media-body col-sm-7 col-md-8">
<h4>
<%= link_to 'Contacts', root_path, class: 'media-heading' %>
</h4>
<p class="heading-text">
Where to find the
<strong>Creatives</strong>
contact module and more.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
采纳答案by paulalexandru
To achieve that you first have to correct you html code because it's not like the one from the website you mentioned. Replace your html code with this one:
要实现这一点，您首先必须更正 html 代码，因为它与您提到的网站上的代码不同。用这个替换你的 html 代码：
<div class="row index-row">
<div class="col-sm-4">
<div class="media">
<div class="row ">
<div class="media-img pull-left col-sm-5 col-md-4 ">
<div class="img-overlay ">
<a class="btn btn-primary animated fadeInUp " href="/en/about/" rel="bookmark">Open</a>
</div>
<%= image_tag('computer.jpg', class: 'pull-left media-img', alt: 'About') %>
</div>
<div class="media-body col-sm-7 col-md-8 ">
<h4 class="media-heading"> <%= link_to 'About', root_path, class: 'media-heading' %></h4>
<p class="hidden-sm">"ABOUT What is Riot Design, our our clients and our specialties."</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="media">
<div class="row ">
<div class="media-img pull-left col-sm-5 col-md-4 ">
<div class="img-overlay ">
<a class="btn btn-primary animated fadeInUp needsclick" href="/en/portfolio/" rel="bookmark">Open</a>
</div>
<%= image_tag('notebook.jpg', class: 'media-img', alt: 'Portfolio') %>
</div>
<div class="media-body col-sm-7 col-md-8 ">
<h4 class="media-heading"> <%= link_to 'Portfolio', root_path, class: 'media-heading' %></h4>
<p class="hidden-sm">PORTFOLIO Web design, app design, print works and photography</p>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="media">
<div class="row ">
<div class="media-img pull-left col-sm-5 col-md-4 ">
<div class="img-overlay ">
<a class="btn btn-primary animated fadeInUp needsclick" href="/en/contacts/" rel="bookmark">Open</a>
</div>
<%= image_tag('building.jpg', class: 'media-img', alt: 'Contacts', type: 'button') %>
</div>
<div class="media-body col-sm-7 col-md-8 ">
<h4 class="media-heading"><%= link_to 'Contacts', root_path, class: 'media-heading' %></h4>
<p class="hidden-sm">Where to find the <strong>Creatives</strong> contact module and more.</p>
</div>
</div>
</div>
</div>
</div>
And also add this to your css file and the pictures should look like you want:
并将其添加到您的 css 文件中，图片应该看起来像您想要的：
.media-img {
overflow: hidden;
padding: 0;
position: relative;
}
.media-img .img-overlay {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.4);
height: 100%;
opacity: 0;
padding-top: 50%;
position: absolute;
text-align: center;
transition: opacity 0.3s ease-out 0s;
visibility: hidden;
width: 100%;
z-index: 4;
}
.media div.media-img img {
height: auto;
transform: scale(1, 1);
transition-duration: 2000ms;
transition-timing-function: ease-out;
width: 100%;
}
img {
vertical-align: middle;
}
.media-img img {
width: 100%;
}
.media div.pull-left {
margin-left: 14px;
margin-right: -15px;
overflow: hidden;
}
