1

記事に画像を含むいくつかの div があります。max-width/height と overflow:hidden を使用して画像をトリミングしていますが、これはうまく機能しますが、上部から画像をトリミングしているため、それらを div の垂直方向の中央に配置したいと考えています.

.image_div {
    max-height: 150px; 
    max-width:99%; 
    overflow: hidden; 
    margin:0px; 
    text-align:center;
}
.image_div img {

}

画像が小さい場合にホワイトスペースの大きなブロックを避けるために、max-width/height を使用しています。私が探しているものはcssで可能ですか?

また、これはモバイル サイトであるため、CSS3 ソリューションも同様に優れていることに言及する必要があります。

4

2 に答える 2

1 
<style type="text/css">
.imgsquare {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding: 2px;
    border: solid 1px #666;
    background-color: #333;
    border-radius: 4px;
}
.imgsquare * {
    vertical-align: middle;
}

.imgsquare {
    display: block;
}
.imgsquare span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>

<!--[if lt IE 8]>
<style>
.imgsquare span {
    display: inline-block;
    height: 100%;
}
</style>
<![endif]-->


これは、次を使用して、元のアスペクト比で垂直/水平の中央に画像を配置した正方形の div を描画します。

<div class="imgsquare" style="width:280px; height:280px;">
    <span></span>
    <img style="max-width:260px; max-height:260px;" src="yourPicture.jpg" alt="No Image">
</div>
于 2012-10-02T20:43:25.250 に答える
0

私はあなたが次のように垂直整列を使用できると信じています：

.image_div {
    max-height: 150px; 
    max-width:99%; 
    overflow: hidden; 
    margin:0px; 
    text-align:center;
    vertical-align:text-top;
}

'text-top'はいくつかのものに変更できます。w3cはそれらをここにリストします： http ：//www.w3schools.com/cssref/pr_pos_vertical-align.asp

于 2012-10-02T20:50:10.160 に答える