我正在尝试复习 css 并想知道这是否仅适用于 css:
假设我有一张想要在100x100
像素 div 标签中显示的图像。我不确定图像会是什么,但如果它小于100x100
像素,我希望它使图像居中。如果图像较大,我希望它缩小到窗口的大小。
例如,如果它更大:
如果它更小:
单独使用css可以吗?
我正在尝试复习 css 并想知道这是否仅适用于 css:
假设我有一张想要在100x100
像素 div 标签中显示的图像。我不确定图像会是什么,但如果它小于100x100
像素,我希望它使图像居中。如果图像较大,我希望它缩小到窗口的大小。
例如,如果它更大:
如果它更小:
单独使用css可以吗?
当然,不是问题。尝试这个:
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
尝试这个:
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>
顶部图像最初是 100 像素 x 100 像素,底部图像最初是 75 像素 x 75 像素。
编辑
糟糕,我的 CSS 倒退了。现在更新了。