ボーダーは過去の画像を拡大しますか？

私はちょうど約1時間前にCSS/HTMLに取り掛かり始めましたが、問題が発生しました。私はこれらの表示をインラインスタイルにしようとしていますが、ボーダーはイメージをはるかに超えているように見えますが、イメージは私が望むように表示できません。ボーダーは過去の画像を拡大しますか？

ありがとうございました！ここで

は私JSfiddleです：https://jsfiddle.net/pghfekj6/

HTML

<div class="gallery"> 
     <figure class="gallery-item"> 
     <img width="50%" height="50%" src="http://66.media.tumblr.com/7a79ee78891996bee770ce47c1f70397/tumblr_o6ajskjBmD1uinem1o1_1280.jpg"> 
     </figure> 

     <figure class="gallery-item"> 
     <img width="50%" height="50%" src="http://67.media.tumblr.com/830d7bf137d8ccac31897d45d985a531/tumblr_o2zapjWK2F1tb4uw5o7_500.jpg"> 
     </figure> 
</div>

CSS

body { 
    font-family: 'Lato', sans-serif; 
    font-weight: 100; 
    color: lightgrey; 
} 

h1 { 
    margin: 20px; 
} 

.gallery { 
    display: inline; 
} 

.gallery-item { 
    margin: 20px; 
    border: 5px solid red; 
}

出典

2016-05-28 Brydon McCluskey

Annnddd ...どのように "のように" 彼らのために表示するのでしょうか？すべてのインライン？ 1行に2つ？ちょうどアイデアを得る。一見、 'figure'要素は問題のようです。 –

ヘイウェズ、私は彼らにインラインスタイルとして表示することを薦めました。これのようなものです：http://66.media.tumblr.com/themes/screenshots/EbZaYEKT43iL4X47_o1.png 以前は 'div'でしたが、私が見たものを真似しようとすると' figure'に変更されましたcodecademy。 –

あなたは特に高さの異なるpinterestスタイルのリスティングページを希望していますか？ –

あなたは画像ではなくで、そのコンテナ（図）に境界線を適用していませんデフォルトではブロックレベルの要素です。つまり、ページの幅にわたっています。

.gallery-item img { 
    border: 5px solid red; 
}

出典

2016-05-28 19:29:47

アンディありがとう！ –

私は私の答えを願っていますあなたのために十分である:)

あなたのイメージに境界線を作りたい場合は、あなたがすることができますが、CSSののimg要素だけで私はそのセレクタのが、img要素

を変更

旧セレクタ .gallery項目

新しいセレクタ .gallery項目IMG

body { 
 
    font-family: 'Lato', sans-serif; 
 
    font-weight: 100; 
 
    color: lightgrey; 
 
} 
 

 
h1 { 
 
    margin: 20px; 
 
} 
 

 
.gallery { 
 
    display: inline; 
 
} 
 

 
.gallery-item img { 
 
    margin: 20px; 
 
    border: 5px solid red; 
 
}

<header> 
 
    <title>web gallery.</title> 
 
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900' rel='stylesheet' type='text/css'> 
 
</header> 
 

 
<body> 
 
    <div class="container"> 
 
    <header> 
 
     <h1> 
 
    web gallery. 
 
     </h1> 
 
    </header> 
 

 
    <div class="gallery"> 
 
     <figure class="gallery-item"> 
 
     <img width="50%" height="50%" src="http://66.media.tumblr.com/7a79ee78891996bee770ce47c1f70397/tumblr_o6ajskjBmD1uinem1o1_1280.jpg"> 
 
     </figure> 
 

 
     <figure class="gallery-item"> 
 
     <img width="50%" height="50%" src="http://67.media.tumblr.com/830d7bf137d8ccac31897d45d985a531/tumblr_o2zapjWK2F1tb4uw5o7_500.jpg"> 
 
     </figure> 
 

 
     <figure class="gallery-item"> 
 
     <img width="50%" height="50%" src="http://66.media.tumblr.com/809db161738e0255821af747f0be1873/tumblr_o7pkyjVO0s1tsrhx6o1_1280.jpg"> 
 
     </figure> 
 

 
     <figure class="gallery-item"> 
 
     <img width="50%" height="50%" src="http://66.media.tumblr.com/8b528e2542564533b0c21d4a23568928/tumblr_o6mh4gKIFA1up0523o2_1280.jpg"> 
 
     </figure> 
 

 
     <figure class="gallery-item"> 
 
     <img width="50%" height="50%" src="http://67.media.tumblr.com/ce934191c63533db7fb398a5766c1778/tumblr_o6mh4gKIFA1up0523o1_1280.jpg"> 
 
     </figure> 
 

 
     <figure class="gallery-item"> 
 
     <img width="50%" height="50%" src="http://66.media.tumblr.com/39cbc0c8de8e947eac27d97b628fa065/tumblr_o7bwagld1r1ss9jvwo1_540.jpg"> 
 
     </figure> 
 

 
     <figure class="gallery-item"> 
 
     <img width="50%" height="50%" src="http://66.media.tumblr.com/986dc5a68d05dc66588de5b4016aa7d6/tumblr_o6mh4gKIFA1up0523o3_1280.jpg"> 
 
     </figure> 
 

 
     <figure class="gallery-item"> 
 
     <img width="50%" height="50%" src="http://66.media.tumblr.com/ca8860045cbe96aec9598a69be76b459/tumblr_o6mh4gKIFA1up0523o5_1280.png"> 
 
     </figure> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-05-28 19:29:54 ZgrKARALAR

明確にするために、 '.gallery-item img'は新しいクラスではなく、別のセレクタです。 –

ボーダーは過去の画像を拡大しますか？

答えて

関連する問題