【发布时间】：2018-02-10 15:56:13
【问题描述】：
如何强制纵向图像具有与横向图像相同的大小并且也具有响应性？
我试图用图像here 执行此操作，其中 div 类为 bake-img，img 类为 back-img-2。我成功地做到了这一点，但它没有响应。有什么建议？
`<div class="col-md-6 ">
<div class="bake-img">
<img class="portfolio-img img-fluid bake-img-2" src="http://res.cloudinary.com/ottiya/image/upload/c_scale,w_985/v1504150918/brooke-lark-261287_rbw0mw.jpg" alt="yummy pastries">
</div>
<h4 class="portfolio-title">Bake920</h4><p class="portfolio-text">Alcatra kielbasa t-bone tongue, swine turducken boudin pancetta kevin leberkas. Bacon ipsum dolor amet brisket corned beef sirloin tongue ribeye venison. </p>
</div>`
【问题讨论】：
-
您可以从创建带边框的空 div 开始，并使用 CSS 使它们的行为方式符合您的要求。当它工作时，您将您的图像添加为 div 的背景图像，并将其设置为
cover。这样，各种图像（风景或肖像）将完美地填充 div。当然有些边界可能会被切断。 -
你会建议不要像这样使用 img 类和使用 css 吗？ .bake-img { 最大高度：273px;溢出：隐藏；边距：20px 0 20px 0； } .bake-img-2 { 边距顶部：-100px; }
-
@kokodoko 你怎么知道边框大小？我无法弄清楚我的风景图像的尺寸是多少，因为它是响应式的，所以尺寸会不断变化:(
标签： html css responsive