我在使用Bootstrap的网格布局时遇到了图片问题。我试图复制http://riotdesign.eu/en/主页的中间部分作为练习。
我的图片会向左拉,并且高度保持在150像素,宽度被裁剪,导致图片看起来很瘦,不太好看。我检查了其他网站的代码,他们以某种方式拥有一个大小为150x150的图片,在md网格布局中为130X130,在小型网格布局中为108x108。我该如何做到这一点?
我猜测130是他们指定的sm-5网格选择中med容器的默认宽度。所以他们选择以这种方式进行调整,这样正确吗?尽管我尽了最大努力,但我仍然无法复制它。以下是我的代码:
<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>