2

我正在尝试复习 css 并想知道这是否仅适用于 css:

假设我有一张想要在100x100像素 div 标签中显示的图像。我不确定图像会是什么,但如果它小于100x100像素,我希望它使图像居中。如果图像较大,我希望它缩小到窗口的大小。

例如,如果它更大:

在此处输入图像描述

如果它更小:

在此处输入图像描述

单独使用css可以吗?

4

2 回答 2

3

当然,不是问题。尝试这个:

CSS

div {
    display: table-cell;
    vertical-align: middle;
    border:1px solid #999;
    width:100px;
    height:100px;
    text-align:center;
    font-size:0;
}
img {
    max-width:100px;
}

HTML

<div>
    <img src="http://www.placekitten.com/200/200" />
</div>

<div>
    <img src="http://www.placekitten.com/50/50" />
</div>

带有两张图片的jsFiddle 示例,一张 50x50,另一张 200x200

于 2013-05-10T18:52:07.010 回答
1

尝试这个:

CSS

div {
  max-width: 100px;
  max-height: 100px;
}

img {
  width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: solid 1px #000;
}

HTML

<div>
<img src="image source1" alt="enter image description here">
</div>
<br>
<div>
<img src="image source2" alt="enter image description here">
</div>

JSFiddle

顶部图像最初是 100 像素 x 100 像素,底部图像最初是 75 像素 x 75 像素。

编辑

糟糕,我的 CSS 倒退了。现在更新了。

于 2013-05-10T19:01:15.220 回答