0

だから私は同様の質問を見つけましたが、私が持っているすべての質問に答えるものはありませんでした.これには簡単なjQueryの答えがあるはずです. オーバーフローを含む独自の div に動的に配置されている複数の画像があります。それらは、含まれる div を塗りつぶし、(水平方向と垂直方向に) 中央に配置する必要があります。含まれる div も異なるサイズになります。

要するに：

  • 複数の異なるサイズの画像が含まれている div を埋めて中央に配置します。
  • div を含むものは異なるサイズになります。
  • ページで複数回使用されます。
  • 画像は比例してボックスを埋めます

願わくば、この画像が私が求めているものを説明するのに役立つことを願っています. ここをクリックして画像を表示します。

使用しているが変更可能な HTML

<div class="imageHolder">
    <div class="first SlideImage">
        <img src="..." alt="..."/>
    </div>
    <div class="second SlideImage">
        <img src="..." alt="..."/>
    </div>
    <div class="third SlideImage">
        <img src="..." alt="..."/>
    </div>
</div>

そして、CSS

.imageHandler{
    float:left;
    width:764px;
    height:70px;
    margin:1px 0px 0px;
}
.imageHolder .SlideImage{
    float:left;
    position:relative;
    overflow:hidden;
}
.imageHolder .SlideImage img{
    position:absolute;
}
.imageHolder .first.SlideImage{
    width:381px;
    height:339px;
    margin-right:1px;
}
.imageHolder .second.SlideImage{margin-bottom:1px;}
.imageHolder .second.SlideImage, .imageHolder .third.SlideImage {
    width: 382px;
    height: 169px;
}

これが意味をなさない場合は何でも聞いてください、事前に感謝します

4

3 に答える 3

0

私が正しく理解している場合、これは純粋な CSS で実行できます。ただし、1)<img>要素の代わりに背景画像を使用しても問題なく、2) IE8 以下をサポートする必要はありません。

JSFiddle: http://jsfiddle.net/6nKKX/

HTML:

<div class="imageHolder">
  <div class="first SlideImage"></div>
  <div class="second SlideImage"></div>
  <div class="third SlideImage"></div>
</div>

CSS: (ソリューションに関連する部分)

.imageHolder .SlideImage {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.imageHolder .first.SlideImage {
  background-image: url('...');
}
.imageHolder .second.SlideImage {
  background-image: url('...');
}
etc.

または、HTML で背景画像をインラインで設定することもできます。<div class="first SlideImage" style="background-image: url('...');"></div>

基本的にbackground-size: cover;は、ボックス全体をカバーするまで画像を拡大縮小し (ボックスの外側にあるものはすべてトリミング)、background-position: center center;画像を中央に配置することを意味します。

于 2013-11-07T10:57:17.890 に答える
0

これが私が思いつくことができる最も簡単な解決策です:) JSFiddleの完全な動作例。 http://jsfiddle.net/L3HhX/1/

$(document).ready(function() {
$('.center-trigger').click(function() {
    centerImageInTheContainers();
});

function centerImageInTheContainers() {
    $('.container').each(function(i, v) {
        var container = $(this);
        var myImg = $(this).find('img'); 
        myImg.css('top', calculatePosition(container.height(), myImg.height()));
        myImg.css('left', calculatePosition(container.width(), myImg.width()));
    });
}

function calculatePosition(containerSize, imageSize) {
    return 0 - ((imageSize - containerSize) / 2);
}

});

于 2013-11-07T03:49:35.880 に答える