Question

我有一个基于网格的布局页面，其中包含横向或纵向的图像（固定宽度为//MAILING ADDRESS ExtendedPropertyDefinition MAILING_ADDRESS = new ExtendedPropertyDefinition (0x3A15, MapiPropertyType.String); contact.SetExtendedProperty(MAILING_ADDRESS, "[Street][, City][, State/Province][ ZIP/Postal code][, Country/Region if not United States]"); //COUNTRY/REGION ExtendedPropertyDefinition MAILING_ADDRESS_COUNTRY = new ExtendedPropertyDefinition(0x3A26, MapiPropertyType.String); contact.SetExtendedProperty(MAILING_ADDRESS_COUNTRY, "[Country/Region]"); //ZIP/POSTAL CODE ExtendedPropertyDefinition MAILING_ADDRESS_ZIP = new ExtendedPropertyDefinition(0x3A2A, MapiPropertyType.String); contact.SetExtendedProperty(MAILING_ADDRESS_ZIP, "[ZIP/Postal code]");）。每次图像都是风景时我想根据宽度增加380px的宽度（所以所有图像的方形像素区域都相等）。

我不确定如何正确调用图像。它应该应用于480px页面上的所有img。

我不确定如何重新定义宽度（通常由CSS定义）以及如何确保w / h比率保持不变。

这是到目前为止的代码

<body class="blog">

Answer 1

试试这个：

$(".blog img").each(function() {
    var max_width = 480;

    var width = $(this).width();
    var height = $(this).height();

    if (width > max_width) { // Only consider images wider than 480px
        if (width > height) {
          //landscape
          var newHeight = (max_width * height) / width;
          $(this).height(newHeight);
          $(this).width(max_width);
        } else if (width < height) {
          //portrait
        } else {
          //square.
        }
    }
});

我定义了一个变量来保持最大宽度：max_width，因为使用变量而不是“魔法”是更好的做法。编号

检查整个语句是否存在，以便只考虑宽度超过480px的图像。如果您希望将较小的图像放大，可以将其删除，但这通常会导致图像质量不佳。

此行根据现有宽度/高度与新宽度的比率计算高度 var newHeight = (max_width * height) / width

正如@zgood指出的那样，你可以使用＆＃39; auto＆＃39;对于高度而言，那么你就不需要进行高度计算，即：

$(this).height('auto');
$(this).width(max_width);

见working here：

Answer 2

正如你在.blog类中拥有所有图像一样，使用jQuery调用它们很容易。

$('.blog').find('img').each(function(){
    //your code goes here
    if ($(this).width() > $(this).height()){
        //landscape
        $(this).height() = (480 * $(this).height() / $(this).width());
        $(this).css('width','480');
    } else if ($(this).width() < $(this).height()){
        //portrait
    } else {
        //square.
});

只需使用find()，即可在.blog内搜索所有img。然后使用each()为每个img应用函数。

希望它有所帮助。

编辑：添加简单的三个规则来计算正确的高度。（感谢mikeyq6）

使用jQuery增加每个风景图像的大小

2 个答案: