我想在不改变纵横比的情况下以固定尺寸显示图像。
我想以这种尺寸显示图像200px * 200px
,同时保持原始纵横比。这里的所有图像都大于200px * 200px
.
我想从中心裁剪图像并将宽度和高度设置为 200px,而不更改纵横比,这意味着我们只想显示图像的一部分。
谁能告诉我如何实现它?我尝试过使用 max-width 和 max-height 的 CSS,但似乎 CSS 无济于事。
我使用 PHP 作为服务器端语言。听说有人推荐GD。有任何想法吗?
这应该可以解决问题
HTML
<div>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" />
</div>
CSS
div {
width:200px;
height:200px;
overflow:hidden;
position: relative;
}
div > img {
width:300px;
height:auto;
position:absolute;
top:-100px;
left:-100px;
}
这是一个演示