将宽度和高度指定为百分比,而不会在HTML中倾斜照片比例

Question

我想知道在宽度和高度属性中,我可以指定宽度和高度作为百分比吗？

嗯,我想这很明显,因为当我这样做时,它调整大小,但它似乎扭曲了我的图像的质量.

以下是具有固定属性的标记示例:

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

现在,在尝试通过百分比来减少一半时(比如说减半):

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

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

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

我认为我只是从根本上误认为我的百分比标记或其他东西,因为我的第二个和第三个例子在视觉上有明显的区别.

更新: 嘿谢谢大家的所有有用的帖子!

我真的很喜欢Pat提出的jQuery建议,因为他提出了一个片段,我实际上可以修改选择器并使其适用于所有受影响的fancybox影像 - 如此:

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

多棒啊!

您可以在我的网站上查看实时效果: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>

您生成的图像宽500像素,高300像素.

jQuery调整大小

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

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

只需确保先取下任何高度/宽度= 50%的属性.

Answer 2

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

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

Answer 3

尝试在 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 4

这是区别:

这会将图像设置为原始大小的一半.

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

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

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

例如,如果您将此作为页面上的唯一元素,它将尝试占据页面宽度的50%,从而使其可能大于其原始大小 - 而不是原始大小的一半,如您所期望的那样.

如果它以大于原始尺寸的形式呈现,则图像将显着地像素化.