以较小的div为中心形成一个大图像 [英] center a big image in smaller div

问题描述

我的目标是将一个更大的图像集中在我的div中。
我不想调整图像大小。
必须显示图片的中心。

My goal is to center an image which is bigger in a my div. I do not want to resize the image. The center of the image must be displayed.

我的div的定义如下：

My div is defined like:

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

然后我的想法是为图片另外创建它：

And then my idea was to create this additionally for the image:

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>

但这不适合我。
任何建议如何解决这个问题？

But this does not work for me. Any advice how to fix this?

感谢Darrell。

Thanks Darrell.

推荐答案

这是诀窍。水平放置图像很容易。然而，垂直居中不是那么容易，并涉及更多的标记。您可以使用 background-position 属性。这里是jsfiddle http://jsfiddle.net/krasimir/ydzZN/2/

Here is the trick. It is easy to center the image horizontally. However the vertical centering is not so easy and involves more markup. You may use background-position property. Here is jsfiddle http://jsfiddle.net/krasimir/ydzZN/2/

HTML

<div class="thumbnail">
    <a href="#" style="background-image: url('http://www.australia.com/contentimages/about-landscapes-nature.jpg')">
    </a>
</div>

CSS

div.thumbnail {
    display: block;
    margin: auto;
    height: 100px;
    width: 100px;
    overflow: hidden;
    position: relative;
}
div.thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
    background-position: center center;
}

当然有一个不好的影响。您的图片不会被编入索引，因为它是CSS样式。

There is a bad effect of course. Your image will not be indexed, because it is in a css style.

这篇关于以较小的div为中心形成一个大图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！