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

我想平铺一些照片，显然有些是在风景，有些是在肖像，当我适合我的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拉图像，这给了我形象。

来源

2016-12-23 illcrx

我做更多的一些环顾四周，发现这篇文章： https://www.smashingmagazine.com/2009/09/backgrounds-in-css-everything-you-need-to-know/

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

background-size: contain;

这告诉它保持纵横比。然后我给了它一个高度，在这种情况下是400px。我在25％的母公司中包含了我的事件，所以它应该很好地扩展！

如果我错过了或没有想到的东西让我知道！

来源

2016-12-23 03:23:23 illcrx

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

.event_cover_container { 
 
margin: 5px 5px; 
 
} 
 
.event_cover { 
 
    background: url('http://www.hdwallpapers.in/walls/loneliness-wide.jpg') center center; 
 
    \t -webkit-background-size: cover; 
 
    \t -moz-background-size: cover; 
 
    \t -o-background-size: cover; 
 
    \t 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>

来源

2016-12-23 04:33:48

'Cover'使照片太大父DIV。 'Contain'维护父div中的整个图片。 – illcrx

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

回答

相关问题