1

私の目標は、私のdivでより大きな画像を中央に配置することです。画像のサイズを変更したくありません。画像の中心が表示されている必要があります。

私のdivは次のように定義されています：

div.thumbnail 
{
   display: block;
   margin: auto;
   height: 100px;
   width: 100px;
   overflow: hidden;
}

そして、私の考えは、画像用にこれを追加で作成することでした:

div.thumbnail img 
{
   overflow: hidden;
   margin: auto;
}

HTML は次のようになります。

<div class="thumbnail">
    <a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}">
        <img src="{{ url_for ('static', filename=album['ThumbPath']) }}">
    </a>
</div>

しかし、これは私にはうまくいきません。これを修正する方法についてアドバイスはありますか？

ありがとうダレル。

4

4 に答える 4

1

これは私が知っている最も簡単な解決策です。やろうとしていることを行うには2つのdivが必要です。そのようです：

   <div class="thumbnail">
      <div class="image-container">
        <a href="{{ url_for('showphotos') }}?key={{ album['AlbumName'] }}">
            <img src="{{ url_for ('static', filename=album['ThumbPath']) }}">
        </a>
      </div>
    </div>

CSS

   .thumbnail{
     width: 100px;
     height:100px;
     overflow:hidden;
   }
   .image-container{
     width: 100%;
     height: 100%;
     //use the margin property to position the image in the div.
     margin: 0 0 0 0;
   }

サムネイルの div を必要なサイズに設定し、オーバーフローをサムネイル内の div に隠すことで、この場合、画像はフルサイズになりますが、表示したい画像のスポットにトリミングされます。

于 2013-08-29T20:52:32.560 に答える
1

画像を水平方向にセンタリングするのは簡単ですが、ページ要素を垂直方向にセンタリングするのは面倒です。よりクリーンな解決策は、画像をbackground-imagediv (または場合によってはアンカー タグ) として設定し、他の css 背景プロパティを使用して配置することです。のようなもの:style="background-image: url([url]); background-position: center"仕事をする必要があります。

于 2013-08-29T20:46:46.573 に答える