css - ボックスに合わせて(CSS経由で)画像を水平方向にサイズ変更する方法は?

Question

私は現在、この問題に悩まされています。高さが強制されたボックス内の CSS を介して画像のサイズを変更しています。

.img_contener {
width: 100%;
height: 400px;
}

画像のサイズ変更用の CSS があります。

img {  
max-width: 100%;
max-height : auto;
height: auto;
width: auto;
box-sizing: border-box;
}

ここで、結果の画像を中央に配置したいと思います。これは、高さによっては、含まれているボックスに収まらず、デフォルトでは左側にとどまっています。

margin:auto と text-align:center の両方が機能しません。

これまで jquery ソリューションを試していませんでした... CSS ベースのソリューションが欲しいです。私の代替手段は、php を使用して画像のサイズを強制的に変更することです。

Answer 1

これを試して：

.img_contener { 
   //your css ...

   overflow:hidden;
}


img {

   //your css ...

   display : block;
   margin : 0 auto;
}

Answer 2

画像をメイン DIV の中央に配置したい場合は、img に追加のタグを使用する必要があります

このようなもの

<div id="container">

    <p><img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" class="inner"/></p>

</div>  

そしてあなたのCSS

#container {
    height: 100px;
    width: 200px;
    border: 1px solid black;
    overflow: hidden;

}

.inner {
    height: 120px;
    width: auto;
}

p {
    text-align: center;

}

作業フィドル: http://jsfiddle.net/TXvuQ/1/

Answer 3

これは CSS で完全に実行可能です。以下の例を参照してください。また、overflow: hidden をコンテナ オブジェクトに追加する必要があります。

HTML

<div id="container">

    <img src="http://userserve-ak.last.fm/serve/252/15767501.jpg" class="inner"/>

</div>

CSS

#container {
    height: 100px;
    width: 100px;
    border: 1px solid black;
    overflow: hidden;

}

.inner {
    height: 100px;
    width: auto;
}

ワーキングフィドル - http://jsfiddle.net/TXvuQ/

Answer 4

Margin:auto は、display:block を画像に適用した場合にのみ機能します。