使图像适合矩形div？

Question

这是我目前面临的问题：

图像适合宽度，但高度不适合。我不希望图像看起来被压扁。有没有办法将它组合在一起并正确地缩放它仍然适合？

这是我的css：

.body-container .main-container .picture .selected {
    height:550px;
    width:740px;
    background-size:cover;
    background:url("../images/case/5.jpg");
}

Answer 1

从Photoshop和Web开发的个人经验。如果图像是例如某个尺寸，则说550×750像素。你想保持这个比例完全相同，否则你会压缩图像。使其适合的唯一方法是在Photoshop中实际打开图像并在那里进行调整。然后在您的网站中使用该新图片。

还尝试使用百分比而不是像素，因为百分比一起缩小。你真的不得不把图片和眼球弄得一团糟，直到它看起来像你真正想要的样子。

Answer 2

您可以使用background-size属性。这样您就可以根据自己的喜好自定义背景图像的高度和宽度。

#some-id {
  background-image: url("someRandomImage");
  background-size: 80px/*WIDTH*/60px/*HEIGHT*/;
  }

Answer 3

试试这个

.body-container .main-container .picture .selected {
   height:100%;
   width:100%;
   background-size:cover;
   background:url("../images/case/5.jpg");
}