Question

我正在尝试平铺一些照片，显然有些是在风景中，有些是在肖像中，当我适合我的CSS时，它适合风景，当我这样做时，它适合肖像。我需要的是一个适合图片，保持纵横比而不隐藏任何东西的盒子。

我目前有这个用于html和css：

<div class="container-fluid">
<div class="row event_cover_container">
    <section class="event_cover" style="background-image: url('<%= events.photos.link %>');">
        <div class="">
            <h4><%=events.title %></h4>
        </div>
    </section>
</div>

.event_cover_container {
width: 25%;
margin: 5px 5px;
}
.event_cover {
    background-color: white;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: left top;
    height: 500px;
    width: 400px;
}

正确的方法是什么？我遇到了一些困难。理想情况下，我想改变高度和宽度元素，以便我可以保持整洁的响应速度。

如果您对背景图像的内联样式感到好奇，我会使用Node.js来提取图像，这样就可以获得图像。

Answer 1

我做了一些环顾四周并找到了这篇文章： https://www.smashingmagazine.com/2009/09/backgrounds-in-css-everything-you-need-to-know/

非常方便的文章，我发现我需要使用

background-size: contain;

这告诉它保持宽高比。然后我给它一个高度，在这种情况下为400px。我在25％的父div中包含我的事件，因此它应该可以很好地扩展！

如果我错过了或者没有想到某些事情让我知道！

Answer 2

我认为你应该使用“background-size：cover”。

.event_cover_container {
margin: 5px 5px;
}
.event_cover {
    background: url('http://www.hdwallpapers.in/walls/loneliness-wide.jpg') center center; 
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
    height: 500px;
}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
<div class="container-fluid">
<div class="row event_cover_container">
    <section class="event_cover">
        <div class="">
            <h4><%=events.title %></h4>
        </div>
    </section>
</div>

很难为风景和肖像照片自动调整背景板。

2 个答案: