将宽度和高度指定为百分比,而不使HTML中的照片比例偏斜

我想知道是否在宽度和高度属性,我可以指定宽度和高度为百分比?

那么,我想这是显而易见的,因为当我这样做的时候,它调整了大小,但是这似乎是扭曲了我的形象的质量。

这里是我的固定属性标记的例子:

<img src="#" width="346" height="413"> 

现在,在尝试缩小这个比例的时候,通过百分比说一半:

 <img src="#" width="50%" height="50%"> 

我得到的东西完全不同于:

 <img src="#" width="173" height="206.5"> 

我认为我只是从根本上误会了我的百分比涨幅,因为我的第二个和第三个例子在视觉上有明显的差异。

更新:嘿谢谢大家的所有有益的职位!

我真的很喜欢Pat提出的jQuerybuild议,只是因为在他的build议中,我实际上可以修改select器,并将其应用于所有受到影响的图像,例如:

 $('img.FancyBox').each(function(){ $(this).width($(this).width() * 0.25); }); 

那真棒!

您可以在我的网站查看实时效果: http : //www.marioplanet.com/product.htm

它工作得很好,考虑到一旦我连接到我的SQL Server数据库,然后我可以将这个jQuery代码片段应用到我的产品页面上的所有FancyBox类图像。

多谢你们!

第二个例子中的百分比宽度实际上是应用于<img>所在的容器,而不是图像的实际大小。 假设你有以下的标记:

 <div style="width: 1000px; height: 600px;"> <img src="#" width="50%" height="50%"> </div> 

您的结果图像将是500px宽和300px高。

jQueryresize

如果您试图将图像缩小到其宽度的50%,可以使用jQuery代码片段来完成:

 $( "img" ).each( function() { var $img = $( this ); $img.width( $img.width() * .5 ); }); 

只要确保先脱掉任何高度/宽度= 50%的属性。

你可以设置一个或另一个(只是不是两个),这应该得到你想要的结果。

 <img src="#" height="50%"> 

以下是区别:

这将图像设置为其原始大小的一半。

 <img src="#" width="173" height="206.5"> 

这将图像设置为其可用演示区域的一半。

 <img src="#" width="50%" height="50%"> 

例如,如果你把它作为页面上的唯一元素,它会试图占用页面宽度的50%,从而使它可能比它的原始大小更大,而不是你所期望的原始大小的一半。

如果以比原始尺寸更大的尺寸呈现,则图像将显得非常像素化。

如果我没有弄错,width =“50%”和height =“50%”将宽度和高度属性设置为父元素宽度和高度的一半。 如果您使用的是百分比,那么也应该设置宽度或高度,将宽度或高度设置为父元素的百分比。

由于缺乏有关原始图像大小的信息,指定宽度和高度的百分比会导致高度不稳定的结果。 如果您试图确保图片适合您网页的特定位置,那么您需要使用一些服务器端代码来pipe理重新缩放。

来自W3Schools

包含元素的百分比高度(如“20%”)。

所以我认为他们是指div所在的元素?

尝试在css3中使用scale属性:

原始的75%

 -moz-transform:scale(0.75); -webkit-transform:scale(0.75); transform:scale(0.75); 

原文的50%

 -moz-transform:scale(0.5); -webkit-transform:scale(0.5); transform:scale(0.5); 

实际上有一种方法只用html来做到这一点。 只是设置:

<img src="#" width height="50%">