Question

我有一个包含8张图片的网格。宽度明智我已经非常敏感。

.gallery .item {
  width: 33%;
  height: 368px;
  float: left;
}

@media screen and (max-width: 1650px) {
  .main-content {
    width: 55.66666667%;
  }

  .gallery .item {
    width: 33%;
    height: 330px;
  }
}
@media screen and (max-width: 1540px) {


  .gallery .item {
    width: 33%;
    height: 290px;
  }
}
@media screen and (max-width: 1450px) {


  .main-content {
    width: 50.66666667%;
  }

  .gallery .item {
    width: 33%;
    height: 250px;
  }
}
@media screen and (max-width: 1315px) {


  .main-content {
    width: 45.66666667%;
  }

  .gallery .item {
    width: 33%;
    height: 210px;
  }
}
@media screen and (max-width: 1200px) {

  .main-content {
    width: 75%;
  }

  .gallery .item {
    width: 33%;
    height: 260px;
  }
}
@media screen and (max-width: 1000px) {


  .main-content {
    width: 100%;
    position: relative;
  }

  .gallery .item {
    width: 33%;
    height: 290px;
  }
}
@media screen and (max-width: 830px) {
  .gallery .item {
    width: 33%;
    height: 250px;
  }
}
@media screen and (max-width: 650px) {
  .gallery .item {
    width: 33%;
    height: 180px;
  }
}
@media screen and (max-width: 650px) {
  .gallery .item {
    width: 33%;
    height: 180px;
  }
}
@media screen and (max-width: 560px) {
  .gallery .item {
    width: 33%;
    height: 175px;
  }
}
@media screen and (max-width: 500px) {
  .gallery .item {
    width: 100%;
    height: 410px;
  }
}
@media screen and (max-width: 380px) {
  .gallery .item {
    width: 100%;
    height: 350px;
  }
}

但是当主题缩小时，它看起来并不那么好。就我而言，我要求它至少看好。

http://screencast.com/t/GlYN75pU

以下是该网站的预览。这是一个实际的预览，而不是屏幕截图：

https://dl.dropboxusercontent.com/u/54191672/theme/index.html

如何在缩小时修复图像被压扁？

Answer 1

您正在约束宽度和高度，这会随着宽度的变化而扭曲图像的纵横比，但高度则不会。

为了保持正确的宽高比，您必须仅限制其中一个参数。大多数开发人员限制宽度，因为设备具有物理最大观看宽度，但通过滚动可以具有无限的垂直观看高度。

例如：

@media screen and (max-width: 1650px) {
  .main-content {
    width: 55.66666667%;
  }

  .gallery .item {
    width: 33%;
    /* or height: auto; */
    height: 100%;
  }
}

图像在变焦时被压扁

1 个答案: