我在Bootstrap的网格布局中的图像有问题。我正在尝试复制http://riotdesign.eu/en/的主页中间部分作为练习。
我的图像将向左拉，高度保持固定为150px，并且宽度被截断，因此图像看起来很瘦而且不是很好。我检查了其他网站代码，它们以某种方式具有150x150的图像，该图像在md网格布局中为130X130，在小网格布局中为108x108。我怎样才能做到这一点？
我猜想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>
要实现这一点，您首先必须更正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>
并将其添加到您的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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句