使用CSS缩放HTML中的图像

我想创建一个HTML页面，可以重新调整大小，以适应大多数现代决议，我使用％为所有我的div容器，他们都很好地扩展，但我有这些容器中的图像他们保持相同的大小。使用CSS缩放HTML中的图像

我不希望图像失去宽高比，但我需要它们重新调整大小以适应容器。我的例子在4：3比例屏幕上工作正常，但在宽屏幕上图像被切断。我使用的图像是213px宽×300px高。如果我必须使用js来解决那么没关系。

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;"> 
    <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div> 

    <div style="padding:1%;width:44%;display:inline-block;"> 
     <img src="black_card.jpg" style="max-width:100%;" alt="Black" /> 
    </div> 
    <div style="padding:1%;width:44%;display:inline-block;"> 
     <img src="black_card.jpg" style="max-width:100%;" alt="Black" /> 
    </div> 
    <div style="padding:1%;width:44%;display:inline-block;"> 
     <img src="black_card.jpg" style="max-width:100%;" alt="Black" /> 
    </div> 
    <div style="padding:1%;width:44%;display:inline-block;"> 
     <img src="black_card.jpg" style="max-width:100%;" alt="Black" /> 
    </div> 
    <div style="padding:1%;width:44%;display:inline-block;"> 
     <img src="black_card.jpg" style="max-width:100%;" alt="Black" /> 
    </div> 
    <div style="padding:1%;width:44%;display:inline-block;"> 
     <img src="black_card.jpg" style="max-width:100%;" alt="Black" /> 
    </div> 
</div>

来源

2012-05-15 Matt_

[jsfiddle]（http://jsfiddle.net/）。 –

忘记我可以很容易地上传图像：在这里它是在jsfiddle http://jsfiddle.net/Cc4FW/1/，你可以看到，如果你改变输出窗口的尺寸框动态改变大小，但图像保持不变大小，我需要他们改变大小，以便他们始终适合盒子，同时保持他们的纵横比和尽可能大。 –

我设法解决这一自己，我给div容器的高度和宽度，则所有其他的div和下方的图像只有得到一个高度，这使得屏幕大小动态，我不得不使用显示：-moz-inline-block获取图像集中在容器div中。检查出来http://jsfiddle.net/mb5T4/2/将结果屏幕重新设置为典型比例（4：3,5：4,16：9），并且所有图像都在div中调整大小。

来源

2012-05-16 04:44:42

我想我有a post对保存HTML长宽比，try giving this a shot：

HTML：

<div id="container">      <!--base wrapper--> 
    <div id="vertical"></div>    <!--flexible vertical component--> 
    <div id="ratioElement">content</div> <!--fit to wrapper element--> 
</div>

CSS：

#container{ 
    position:relative; 
    width:100%; 
    float:left; 
} 

#vertical{ 
    margin-top:50%;  /* 2:1 ratio (#container width : #vertical height) */ 
} 

#ratioElement{   
    position:absolute; /*this would be the <img>*/ 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background:#069; 
}

来源

2012-05-15 04:48:42 Joseph

，如果你想使用1个图像那么你应该像下面这样编码。

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;"> 
    <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div> 
    <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
    <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
    <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
    <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
    <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
    <div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
</div>

来源

2012-05-15 04:51:32 cgvector

你好我想让它缩放2列图像，每列3幅图像。 –

然后你应该使用宽度32％ – cgvector

更改宽度仍然给我一个固定大小的图像，如我手动更改屏幕的大小，图像保持不变。 –

您可以使用jQuery Resiable： JQuery UI Resizable

$（选择）.resizable（...）;

有很多例子。

来源

2012-05-15 05:26:52 HGK

我正在研究这个，但它似乎更多的是用户输入调整大于动态调整大小。 –

检查从第一行这个

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;"> 
    <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div> 
    <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
    <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
    <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
    <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
    <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
    <div style="padding:1%;width:30%;display:inline-block; float:left;"> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div> 
</div>

来源

2012-05-15 07:17:41 cgvector

嗨cgvector这给了我一个3列2行块，反正我的屏幕上。我已将您的代码修改为jsfiddle，以显示如何在调整大小时切断图像。 http://jsfiddle.net/rRYcX/ –

这段代码在我身边正常工作..... – cgvector

我附上了一个问题的图片，最顶层的是模拟4：3环境，底部是16： 9，底部的图像被剪掉，而不是缩小到合适的位置。 http://imgur.com/pJT0i –

移除高度....

来源

2012-05-15 07:43:49 cgvector

但随后该框不能与窗口一起缩放，框的高度和宽度与窗口大小有关。 –

当你删除高度检查问题解决...你也使用溢出隐藏，这就是为什么你最后的图像切割... – cgvector

如果我删除高度，框不与窗口成比例，框的高度保持相同的大小，所以在4：3显示器上它将是屏幕高度的38％，但是在16：9时它是〜屏幕高度的60％。保持高度属性并去除溢出：隐藏只是使图像溢出盒子，因为它的大小被调整。 –

使用CSS缩放HTML中的图像

回答

相关问题