将宽度和高度指定为百分比，而不使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类图像。

多谢你们！

Answer 1

第二个例子中的百分比宽度实际上是应用于<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％的属性。

Answer 2

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

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

Answer 3

以下是区别：

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

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

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

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

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

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

Answer 4

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

Answer 5

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

Answer 6

来自W3Schools

包含元素的百分比高度（如“20％”）。

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

Answer 7

尝试在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); 

Answer 8

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

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