10

私のページには、たとえば最大100x100の画像を表示できる画像用のスペースがあります。ユーザーは任意の画像サイズをアップロードでき、Webアプリケーションはアスペクト比を維持しながら画像のサイズを100x100に変更します。したがって、画像のサイズをたとえば75x100または100x75などに変更することができます。

サイズ変更された画像のサイズに関係なく、Webページの割り当てられたスペースの中央に垂直方向および水平方向に表示されるようにします。CSSでこれを行うにはどうすればよいですか？次のような包含divが必要ですか？

<div class="image_container">
     <image src="http://placehold.it/100x100/" height="100" width="100" alt=""/>
</div>

とにかく、サンプルCSSが役に立ちます。ありがとう！

4

7 に答える 7

25

これを試してください-http://jsfiddle.net/zYx4g/ これは、あらゆるサイズのすべてのブラウザで機能します。

.image_container {
    width: 300px;
    height: 300px;
    background: #eee;
    text-align: center;
    line-height: 300px;
}

.image_container img {
    vertical-align: middle;
}
​
于 2012-04-29T10:28:07.367 に答える
14

私はこれがすでに答えられている古い質問であることを知っていますが、今あなたはフレックスを使うことができます

<div class="container">
    <img  src="http://placehold.it/200x200" />
</div>

CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid;
    width: 50vw;
    height: 50vw;
}
.container img
{
    max-width:100%;
    max-height:100%;
}

フィドルデモ

コンテナのサイズをカスタマイズすることもできます。一部のブラウザはフレックスをサポートしていない可能性があります。ここで確認できます。

于 2016-03-17T14:24:51.250 に答える
3

画像の左上隅を中央に移動し、画像の幅と高さの半分にリセットします。

.image_container img{
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}
于 2012-04-29T10:21:56.840 に答える
2 
<div class="blog-thumbnail">                
    <img src="img.jpg" alt="img">
</div>

.blog-thumbnail {
    height: 200px;
    margin: 0 auto;
    position: relative;
}
.blog-thumbnail img {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
于 2019-05-03T09:39:25.873 に答える
1

あなたはこれを試すことができます：

.image_container {
    display:table-cell;
    overflow:hidden;
    text-align:center;
    vertical-align:middle;
}
.image_container img {
    vertical-align:baseline;
}

ブラウザの互換性について100％確信はありませんが、正しい方向に進む必要があります。例： http： //jsfiddle.net/fJtwX/1/

于 2012-04-29T10:27:28.710 に答える
1

編集：ゾルタン・トートはうまく答えました。

ジェイミーの答えはうまくいきます。古いブラウザとの互換性が必要な場合は、テーブルを使用しますか？

私はおそらくうめき声を上げるでしょうが、必要な場所で使用する場合、テーブルに問題はありません！

http://jsfiddle.net/Yhq5h/11/

コンテナを必要なサイズに設定します。ページを表示する必要がありますが、これはすべてのブラウザで機能するはずです。

于 2012-04-29T10:39:28.017 に答える
1

誰かがまだこれを必要としている場合は、ここに表示テーブルでそれを行う方法があります。

.thumbnail { width:150px; height:150px; display: table; }

.thumbnail img { max-width:150px; max-height:150px; }

.thumbnailcontainer { display:table-cell; vertical-align: middle; text-align:center;}
<article class="thumbnail">    
  <div class="thumbnailcontainer">
         <img id="Img1" src="http://img.youtube.com/vi/QAOMIH7cgh0/0.jpg" />   
   </div>
</article>

于 2017-05-18T11:50:29.340 に答える