0
私はイメージカルーセルのブロックを持っています。私は画像のサイズについて何も知らない。画像を中央に縦横に整列させたい1つの特別なことは、画像の上にラッパーが必要なので、私はユーザー名で小さなプレートを設定できるということです。 100％と最大の高さ：だから私は、max-幅を使用し、100％をこのdiv内のimgとFFの最大幅の問題
How to vertically align an image inside div
のような中心部と中央の位置合わせのために私はこのコードを持っている
.container{
position: relative;
width: 100px;
height: 100px;
border: 1px solid;}
.frame-wrapper{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;}
.frame {
/* equals max image height */
position:relative;
display: inline-block;
border: 1px solid red;
white-space: nowrap;
max-width: 100%;
max-height: 100%;
height: 100%;
box-sizing: border-box;
vertical-align: middle;}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;}
img {
vertical-align: bottom;
max-width: 100%;
max-height: 100%;}<div class="container">
<div class="frame-wrapper">
<span class="helper"></span>
<div class="frame">
<span class="helper"></span><img src="https://dummyimage.com/50x200/000/fff" />
</div>
</div>
</div>イメージの高さがコンテナよりも大きい場合に問題が発生します。それが起こると、写真はラッパーを大きくし、それを固定するために、私は高さを設定します：ラッパーと画像に100％をフィットさせます。私がここで尋ねるのは、高さを設定したFFブラウザでは、ラッパーイメージの100％がスケールですが、ラッパーはそれに従わずに元の幅を持ちます。
だからあなたはあなたが http://jsfiddle.net/crazyboris/pd3v2kp8/1/
したい場合は、この出来事はなぜあなたが任意のアイデアを持っています任意のブラウザの代わりにFirefoxでこれを開いて、それが
JSフィドルを動作する必要がありますどのように見ることができますか？