2

我有一张原始尺寸为 900x300 的图像。我有一个大小为 320x180 的图像容器。当我展示这个时，图像看起来被挤压了。我理解这是因为比例不一样。所以我打算展示它的一个缩放版本，但只是操纵它的 CSS。是否可以？也欢迎任何其他可以使用 CSS 技巧很好地显示此图像而不会使其在此框中看起来被挤压的想法。

这是一个可以玩的小提琴。我目前正在设置widthand heightto100%并隐藏溢出。

4

5 回答 5

1

这是因为你的图像比例是 3:1。您还需要将容器大小设置为 3:1...如果您希望宽度为 320 像素，那么您必须将高度设置为 106 像素（准确地说是 106.6 像素），或者与原始图像成比例的其他值。这是一个更新的小提琴。

.boutique-grid .box-container {
position: relative;
height: 106px;
width: 320px;
}

你会注意到它现在是成比例的。

于 2013-09-20T05:12:59.073 回答
0

您的问题没有提供您想要的缩放类型，但我可以给您一个想法，如果您希望图像应该在其位置缩放，并具有完整尺寸，然后使用以下 CSS 和悬停属性：-

.boutique-grid .box-container:hover {
 position: absolute;
 width:900px;
 height:300px;
 }

在这里查看小提琴：- http://jsfiddle.net/npsingh/3m9aK/6/show/

此外，如果您想通过弹出窗口提供缩放，则可以通过以下链接实现此目的：- http://cssdemos.tupence.co.uk/image-popup.htm

如果您想使用 center 属性裁剪图像，然后在该容器中使用，那么您应该使用 margin 属性裁剪图像，这样您就可以使用相同的纵横比裁剪图像。请参阅下面的帖子：-

http://www.squareonemd.co.uk/how-to-crop-an-image-with-a-css-class/

让我知道它是否会起作用......

于 2013-09-20T05:33:03.280 回答
0

如果你想要一个缩放版本，那么你可以在 css 中使用 css 背景属性。如果这是您想要的，这是代码：

.box-container {
position: relative;
height: 180px;
width: 320px;
    background:url("http://cf.shopious.com/images/store_logos/original/9f84c96905ade833f48054cda524c7960dc0f424.png") no-repeat;
background-position:-500px -50px;   
}

并从 html 中删除 img。这给出了缩放的效果

于 2013-09-20T05:45:49.550 回答
0 
.box-container img {width:100%; 
height:auto;}

将上面的代码添加到您的 css 中。这样图像就不会被挤压。

于 2013-09-20T06:26:44.057 回答
0

只需从 HTML 中删除图像元素并background-image在您的 CSS 中使用即可。

然后，您可以cover使用background-size. 这将负责缩放图像以适应框并保持比例：

.boutique-grid .box-container {
    position: relative;
    width: 320px;
    height: 180px;
    background-image:url(...);
    background-size:cover;
    background-position:center;
}

修改后的小提琴在这里

使用这种方法，您无需担心重新计算尺寸，因为浏览器会为您完成。

使用background-position微调其位置。

有关背景大小的更多详细信息：
https ://developer.mozilla.org/en-US/docs/Web/CSS/background-size

于 2013-09-20T06:33:21.837 回答