Question

我希望图像高度修复精确300px，即使在没有图像拉伸的响应屏幕中也是如此。虽然我尝试object-fit: cover;和它的工作我想要的，但它只与最新的浏览器兼容。请避免愚蠢的答案。

.container {
        width:100%;
        height:300px;
}

.container img {
        width:100%;
        height:300px;
        }

 <div class="container">
 <img src="images/bnr1.jpg" />
</div>

Answer 1

我会去：

img{
  max-width: 100%;
  height: auto; 
}

或max-height: 300px如果您希望（肖像）图片超过该尺寸。

如果您想确保没有任何东西越过容器的边界，您可以执行以下操作：

.container{ height: 300px; overflow: hidden; }

Answer 2

  <!DOCTYPE html>
  <html>
 <body>
<head>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
 <style>

 .container {
    width:100%;
    height:300px;
    overflow:hidden;
  }

  <!--scontainer img {
    width:100%;
    height:300px;
    }
    -->
</style>
<body>

<div class="row">
<div class="container">
<img class="col-md-12" src="url.jpg" />
</div>
</div>
</body>
</html>`

即使在没有图像拉伸的情况下也可以修复图像

2 个答案: