2

これは私のコードです:

HTML

<html>
<body>
  <div id="id">
    <div class="one">
      <img>
    </div>
    <div class="two">
      <img>
    </div>
    <div class="one">
      <img>
    </div>
  </div>
</body>
</html>

CSS

div{
float : left;
width : 33,3%
height : 100%;
}

img{
max-width : 100%;
max-height : 100%;
}

div#id{
position : fixed;
top : 0;
bottom : 0;
left : 0;
right : 0;
}

これは何年も探しているのですが、わかりません...

div と画像の不明な高さ画像は変更される可能性があります。div class="one" 内の画像を垂直方向に揃えるにはどうすればよいですか? これはアダプティブ レイアウトであるため、オーバーフローを防ぐために画像をスケーリングする必要があります。

table-cell または line-height = 100% は機能していないようです。

ここで本当にjavascriptが必要ですか? 私はjqueryコードを試しましたが、それは私の知識を超えており、私のウェブサイトのすべての画像の余白を変更してしまいます...ここにあります:

$(document).ready(function() {                  
  $(".one").each(function(){
    var wrapH = $(".one").outerHeight();
    var imgH = $("img").outerHeight();
    var padTop = (wrapH-(imgH))/2;
      if (padTop>0){
        $("img").css("margin-top", padTop + "px");
      }
  });
});
4

3 に答える 3

2

次の HTML を使用すると、これを簡単に行うことができます。

<div class="wrap">
    <div class="image-panel">
        <img src="http://placekitten.com/300/300">
    </div>
    <div class="image-panel">
        <img src="http://placekitten.com/400/600">
    </div>
    <div class="image-panel">
        <img src="http://placekitten.com/200/600">
    </div>
</div>

次の CSS スタイルを適用します。

.wrap {
    border: 1px dotted blue;
    display: table;
    width: 100%;
}
.image-panel {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px dashed blue;
    width: 33.3333%;
    padding: 10px;
}
.image-panel img {
    width: 100%;
    display: block;
}

この特定のレイアウトでは、各パネルが合計幅の 33.3% を持ち、画像がテーブル セル div の幅に合わせて自動スケーリングされると仮定しました。

デモ フィドル: http://jsfiddle.net/audetwebdesign/ZBNh7/

于 2013-05-31T20:41:41.563 に答える
1

OK、この投稿で bdmoura に jquery thx を使用するソリューションを最終的に見つけました: https://stackoverflow.com/users/2442497/bdmoura 彼は、画像と div の高さに応じて画像に適応マージンを設定する方法を教えてくれました。ここにjqueryコードがあります：

$(document).ready(function() {
  $(".one").each(function(){
    var wrap = $(this),
    wrapH = wrap.outerHeight(),
    img = wrap.find('img'),
    image = new Image(),
    imgH = 0,
    padTop = 0;

    image.onload = function () {
        imgH = img.outerHeight();
        padTop = ( wrapH - ( imgH ) )/2;
        if ( padTop > 0 ){
             img.css("margin-top", padTop + "px");
        }
    }

    image.src = img.attr('src');

  });
});

彼にthx！

于 2013-06-01T08:35:07.040 に答える
0

はい。この時点で、jQuery / javaScript が必要になると思います。

img または inline / inline-block 要素を相互に整列させることしかできません。

.block img {
    /* display: inline; (default) */
    display: inline-block;
    vertical-align: middle;
}

フィドル：ここ

分かれば最高です！私たちは皆これを必要としています。

前述のように table-cell を使用できます...しかし、レスポンシブ設定では、特にこれらのブロックがレスポンシブ グリッドにある場合は、これではうまくいきません。フローティングが必要になると、ほとんどの場合、物事は非常に面倒になります。神秘。

于 2013-05-31T20:51:50.973 に答える