0

4 つの div コンテナーを持つギャラリー グリッドがあります。各 div ボックスの高さと幅が異なることに注意して、div 内の画像を囲みたいと思います。すべての辺に適切なパディングを残して、div の中央に配置する必要があります。JsFiddle http://d.alistapart.com/fluid-images/3-4.pngをよりよく理解するには、リンクを確認してください。

どんな助けでも大歓迎です。ここにコードを入力してください

 <div id="body">
  <div class="container">
<img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">          
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h2">
    <img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container h3">
    <img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container w2">
    <img class="magic" src="http://photos.smugmug.com/photos/i-2wtTsHn/0/M/JLF_3559-M.jpg">
</div>


 .container {
  height:100px;
   width: 100px;
  overflow: hidden;
   position: relative;
  margin-bottom: 10px;
  float: left;
  background: #CCC;
   border-radius: 5px;
  cursor: pointer;
   box-shadow: 4px 0 2px -2px rgba(0, 0, 0, 0.4);
     }
  .magic {
   max-width:90%;
   height:70%;
   }
   .h2 {
  height: 210px;
   width: 220px;
    }
  #body {
    margin: 10px;
   }
 .h3 {
  width: 340px;
  height: 210px;
  } 
  .w2 {
    width: 220px;
   }
4

2 に答える 2

0

私はあなたの問題を理解したかどうか確信が持てません...

.magic {
    max-width:100%;
    max-height:100%;
}

大きな写真で何が問題なのですか？

div全体を埋め、サイズの比率を尊重したいですか？

于 2013-03-25T17:41:49.713 に答える
0

次のように、これらの画像を背景画像プロパティとしてブロックレベルの div に追加することをお勧めします。

<div class="container">
    <div class="magic" style="background-image: url(SOURCEHERE.JPG)"></div>
</div>

次のような追加の CSS を使用します。

.container{
    width: 100px; /* or some other width */
    height: 100px; /* or some other height */
    padding:20px; /* this will add a little margin around your image */
    box-sizing:border-box; /* padding will be calculated with the container dimensions */
}

.magic{
    width:100%;
    height:100%;
    background-size:contain;
    background-position:center center;
    background-repeat:no-repeat;
    box-sizing:border-box;
}

jsfiddle: http://jsfiddle.net/PDL2U/

于 2013-03-25T18:08:24.093 に答える