如何保持图像缩略图的纵横比

如何保持图像缩略图的纵横比，使其看起来不会被挤压？如何保持图像缩略图的纵横比

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; 
}

来源

2014-01-24 user3040048

CSS的样子是什么？.ProfilePhotoSmall？除了CSS内部，我找不到任何改变图像大小的方法？ – BenM

提供了CSS。谢谢。 – user3040048

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

比方说，你有300px width和150px height的图像。
找到比例，这里是2。当你给图像增加一个新的宽度时，例如250px。
除以250px/2找到相应的高度。新宽度为250px，高度为125px。

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

注意，你不能用CSS调整图像的，它只是调整它的用户。比它需要

来源

2014-01-24 23:09:09

除了指定无论是在CSS中width和height规则的它会加载一个较大的图像，只需指定其中一个（哪一个取决于你想缩放的方式）。一项所述的遗漏将具有浏览器保持纵横比：

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

上面的代码将图像尺寸调整到的110px的宽度和高度将被浏览器自动计算。

来源

2014-01-24 23:12:48 BenM

+1小增加：如果你想要一个固定大小的盒子用于你的图像，你可以将其设置为背景图像并使用'background-size：cover'使图像按比例缩放以覆盖整个盒子。 – jeroen

谢谢，但它没有高度不好。 – user3040048

如何保持图像缩略图的纵横比

回答

相关问题