Question

如何保持图像缩略图的宽高比，使它们看起来不被压扁？

  protected function DisplayPhoto($Sender) {
        $body = $Sender->EventArguments['Discussion']->Body;
        preg_match('#\<img(.+?)src=(.+?)\>#s', $body, $matches);
              if(isset($matches[2])){
                    $image = "src=" . $matches[2];
                    echo '<img class="ProfilePhotoSmall"' . $image . '>';
              }else{
                    //do what you want
              }       
  }

这是CSS。

ul.Discussions li img {
height: 60px;
width: 110px;
padding: 0 6px 0 4px;
float: right;
position: relative;
}

.Discussion.ItemContent {
padding-right: 0px;
padding-bottom: 10px;
display: inline;
}

Answer 1

不要在CSS中同时指定width和height规则，只需指定其中一个规则（哪一个取决于您希望缩放的方式）。省略一个将使浏览器保持宽高比：

ul.Discussions li img {
    width: 110px;
    padding: 0 6px 0 4px;
    float: right;
    position: relative;
}

以上代码会将图片的大小调整为110px的宽度，浏览器会自动计算高度。

Answer 2

我没有看到你改变图像大小，但逻辑将是这样的：

假设您有300px width和150px height的图像找到比率，此处为2。当您为图像指定新宽度时，例如250px。
除250px/2以找到相应的高度。新宽度为250px，高度为125px。

这只是一个给你提示的基本逻辑

请注意，您无法通过CSS调整图片大小，只会为用户调整大小。它会加载比需要更大的图像

如何保持图像缩略图的宽高比

2 个答案: