4

我的 HTML 代码如下所示：

<div class="ctn">
    <img src="some-img.jpg"/>
</div>

ctn应该是固定大小，例如 150*150 。

但 IMG 的尺寸可能更大或更小：200*50、50*200、50*50 等。

如何使图像适合中心div？图像的比例不应改变。

====更新====是的，我需要hori和垂直中心。

4

8 回答 8

15

您可以添加 css，将图像水平和垂直居中：

DIV.ctn {
    min-height: 150px;
    min-width: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table-cell;
    vertical-align: middle }

...

<div class="ctn">
    <img src="some-img.jpg"/>
</div>

编辑：有关详细信息，请参阅：http ://www.w3.org/Style/Examples/007/center.html

于 2013-05-29T15:40:16.833 回答
5

尝试以下操作：

text-align: center;    
display: table-cell;
vertical-align: middle;

演示

于 2013-05-29T15:37:35.467 回答
2

我想这是你的答案

.container img { width: 100%;}
.container {display: table-cell;vertical-align: middle}

http://jsfiddle.net/RUQAM/1/

它适合，在您固定大小的 div的中心，并且图像比例不会改变。

于 2013-05-29T15:49:05.780 回答
1

编辑：重新阅读，您希望图像大小固定。

div.cnt {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    min-height: 150px;
    min-width: 150px;
}
于 2013-05-29T15:40:45.717 回答
0

最简单的方法应该是：

div.cnt {
    width: 150px;
    height: 150px;
}

<div class="ctn" style="background: url('some-img.jpg') 50% 50% no-repeat;">

</div>
于 2013-05-29T15:46:13.433 回答
0

如果ctn必须是固定大小（例如：150x150）并且图像必须成比例且不大于该 div，这是一个解决方案：

CSS

.ctn{
    background-color:#F00;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    overflow:hidden;
    height:150px;
    width:150px;
}
.ctn div{
    display:table-cell;
    vertical-align: middle;
    text-align:center;
}
.ctn div img{
    width:150px;
}

HTML

<div class="ctn">
<div>
    <img src="url" />
</div>
</div>

这种方式将使 div 在屏幕中间居中，图像不会大于 150x150，但会保持其比例。

于 2013-05-29T19:35:57.187 回答
0

然后在你的css中给你喜欢的id →

#foto{
    margin-left:180px;
}
于 2019-08-27T13:17:26.777 回答
-4

设置样式="margin-let:auto; 边距:right:auto"

还要指定图像的宽度，否则它将不起作用

于 2013-05-29T15:38:29.020 回答