Question

我想在DIV标签内制作相同的高度响应图像。例如，高度可以是200px。任何人都可以帮助我吗？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="Css aspect ratio to have images of same height">
  <!-- include bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="col-sm-12" id="lift">
  <div class="row">
    <div class="col-sm-12 col-md-3 ">
       <a class="link-block" href=""> <img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg"> </a>
       <p class="lift-title">Text 1</p>
    </div>
    <div class="col-sm-12 col-md-3 ">
        <a class="link-block" href=""> <img class="img-responsive" src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi"> </a>
        <p class="lift-title">Text 2</p>
    </div>
    <div class="col-sm-12 col-md-3 ">
        <a class="link-block" href=""> <img class="img-responsive" src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg"> </a>
        <p class="lift-title">Text 3</p>
    </div>                     
  </div>
</div>
</body>
</html>

Answer 1

请将宽度删除为100％.col-sm-12

使用以下CSS作为图像

.img-responsive{
  display: block;
  max-width: 100%;
  height: 200px;
}

这可以为所有图像提供独特的高度以及响应性

Answer 2

简单的方法是将图像的高度设置为200px硬编码并将其宽度设置为自动。

http://www.hko.gov.hk/cis/dailyExtract/dailyExtract_2015.xml

但有时它可能会影响你的反应能力。可能你应该选择img{ height : 200px; width : auto; }。

说

flex

将.flex{ display:flex; }课程添加到flex这将使所有row的身高相等，然后您可以将cols图片设为height以及200 px为width。这将保持图像的宽高比和分辨率，并保持响应性，您可以将它与auto的引导类一起使用，因为您已经使用过它。

相同高度的图像不会破坏分辨率

2 个答案: