風景や人物写真の背景パネルを自動化するのに苦労しています。

私はいくつかの写真をタイルしようとしています。明らかにいくつかは風景にあり、一部は肖像画になっています。私が必要とするのは写真に合った、アスペクト比を維持し、何も隠さない箱です。風景や人物写真の背景パネルを自動化するのに苦労しています。

私は現在、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

風景や人物写真の背景パネルを自動化するのに苦労しています。

答えて

関連する問題