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

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%;
}

Answer 2

或者您可以将图像设置为DIV的背景图像，然后将背景大小设置为覆盖。

System->Permissions->Roles