を保存:私は初心者だし、私はすぐに私の頭の上に得ている他の画像内の画像を中心に、かつ応答性
私は私が私のサイト全体で再利用できるパターンを作成しようとしています: 2枚の写真が並んでいて、それぞれ水彩画が後ろから覗いています。
これらは、最小の画面まで適切に拡大縮小する必要があります(私は小さな画面でラップするかどうかについてはかなり不自然です)。
ここに私のコードです:
.two-pics {
width: 100%;
}
.wc-pic-blue {
width: 40%;
background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4007c65e4c37e086e54/1464452096489/_watercolor-splash-blue.jpg');
background-size: contain;
background-repeat: no-repeat;
float: left;
padding: 4%;
}
.wc-pic-pink {
width: 40%;
background-image: url('http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c4077c65e4c37e086e6d/1464452103387/_watercolor-splash-magenta.jpg');
background-size: contain;
background-repeat: no-repeat;
float: right;
padding: 4%;
}
<div class="two-pics">
<div class="wc-pic-blue pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749c529b09f953f29724252/1464452394022/8248798.jpg">
</div>
<div class="wc-pic-pink pic">
<img src="http://static1.squarespace.com/static/57476d871bbee069994f419a/t/5749ca6e37013bafc39f394d/1464453743501/parade-2.jpg">
</div>
<br style="clear: left;" />
</div>
私の本能が、その後、親事業部内の背景画像(水彩飛沫)を持つ2つのdiv要素(同一であるが、そのソースイメージのための)をラップすることでしたが、それぞれの子Divs内に画像を貼り付ける - そして、子Divのそれぞれの中に画像を(垂直方向と水平方向の両方に)中央に置くようにしたので、水彩のはねがすべての面で等しく見えるようになりました。いくつかの奇跡によって
これは、実際に働いていた - ほとんどが - が、私はページを閲覧したときに、私は奇妙なファントムスペースを見つけることでした。内部の画像は決して水彩画の中で正しくセンタリングされませんでした。
:(
をスケーリング時に起こって奇妙なものは、私は必死に混乱しているもあります - ??私は、背景画像とフレキシボックスネストされたdivタグを使用する必要があり
Here's my Fiddle誰でも勇敢で寛大な感じている場合:)
ご協力いただければ幸いです。
(意味的に、おそらくプログラム)最良の方法は、背景画像、および実際の画像のような画像とスプラッシュを設定することであろう。 –