将不同尺寸的图像调整为特定格式

Question

我正在解析来自不同API的图像,我想在网站上显示它.但我有问题,以特定的大小显示它以适应它在引导程序列表(~700x300px)有时图像是纵向而不是横向.整个700x300px空间应该由图像填充,但不能拉伸.

方法#1将 图像下载到服务器,调整大小并进行转换.来自localserver的主机而不是远程链接.

方法#2 使用AngularJS的一些魔法(我是那个区域的新手)

方法#3 使用CSS/HTML5的一些魔力(我也是新手)

现在我得到了这样的东西

<style>
    .list {
        width: 700px;
        height: 250px;
        overflow: hidden;
        position: relative;
    }

    div img {
        position: absolute;
    }
</style>

Answer 1

抱歉，我的英语很差，如果以下表述不流利，请理解

我不太明白你的意思，但我认为这可以解决你的问题：

.list {
    width: 700px;
    height: 250px;
    overflow: hidden;
    position: relative;
}
div img {
    position: absolute;

    /*Add this code*/
    width: 100%;
}