Question

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

这是一个fiddle。我目前正在将width和height设置为100%并隐藏溢出。

Answer 1

这是因为你的图像比例为3：1。您需要使容器尺寸为3：1 ......如果您希望宽度为320px，则必须将高度设置为106px（确切地说是106.6px），或者与原始图像成比例的其他东西。这是一个更新的 fiddle 。

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

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

Answer 2

你的问题没有提供你想要什么类型的缩放，但是我可以给你一个想法，如果你想要将图像缩放到它们的位置，使用完整的大小然后使用带有悬停属性的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属性裁剪图像然后在该continer中使用，则应使用margin属性裁剪图像，这样您可以使用相同的宽高比裁剪图像。请参阅下面的帖子： -

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

让我知道它是否有效......

Answer 3

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

.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。这给出了缩放的效果

Answer 4

.box-container img {width:100%; 
height:auto;}

将以上代码添加到您的CSS中。所以这个图像不会黯然失色。

Answer 5

只需从HTML中删除图片元素，然后在CSS中使用background-image。

然后您可以使用cover的{{1}}参数。这将照顾缩放图像以适应盒子并保持它成比例：

background-size

<强> MODIFIED FIDDLE HERE

使用这种方法，您无需担心重新计算尺寸，因为浏览器会为您执行此操作。

使用.boutique-grid .box-container { position: relative; width: 320px; height: 180px; background-image:url(...); background-size:cover; background-position:center; }微调其位置。

有关背景尺寸的更多详情：
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

在一个具有不同图像比例的框中显示图像

5 个答案: