将图像适合容器尺寸以保持纵横比 [英] Fit images to container size keeping aspect ratio

问题描述

我找不到在此网页上显示缩图的方法作为适配到相同尺寸的盒（高度：122px和宽度：178px），而不改变它们各自的宽高比。
我不知道缩略图的原始尺寸。
我可以看到几个嵌套 divs ，而 .picture1 的类有一个那些尺寸，但图像不适合这个div。 这是真的一个问题。检查你的页面很简单，如果你添加下面的类图像适合在容器内

  .work-view img {
 max-height：100px; 
 padding：5px 5px 2px; 
 max-width：150px;} 
  

I can't find a way to display the thumbnails on this page as fitting into boxes of same dimensions (height:122px and width: 178px) without changing their respective aspect ratio. I don't know the thumbnails original dimensions. I have several nested divs as you can see, and the one that is of class .picture1 has those dimensions, but the images do not fit into this div. Can you help me ?

Thanks

解决方案

IS this really a problem. After checking your page its quite simple that if you add the below class the images fit inside the comtainer

    .work-view img {
      max-height: 100px;
      padding: 5px 5px 2px;
      max-width: 150px;}

这篇关于将图像适合容器尺寸以保持纵横比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！