Question

我一直使用position: absolute进行编码，然后使用媒体查询来查找不同的分辨率，并将屏幕上的项目调整为该分辨率。在环顾四周后，人们已经说过，设计流畅并自动调整会更好。

昨天我在登录界面上尝试了，我设法让它运转起来。在我的下一个屏幕上，我认为这有点困难，因为我有需要缩放的图像。

这是我的页面布局：

.wrapper {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.bsimplex-header-bar {
  margin-right: 10px;
  margin-left: 10px;
  width: 98.7%; /* 940 divided by 960 */
}

.content {
  width: 98.7%;
  margin-top: 38px;
  margin-right: 10px;
  float: right;
  height: 79.5%;
  margin-right: 10px;
}

.bsimplex-footer-bar {
  width: 100%;
  bottom: 0;
  position: fixed;
  margin-right: 10px;
  background-color: #6a3d98;
  margin-left: -10px;
}

现在我有4个图像需要并排放在屏幕中间，我会将这4个图像包装在自己的div中吗？或者我如何实现这种缩放效果？

Answer 1

要使图像更加灵活，只需添加max-width：100％和height：auto。 Image max-width：100％和height：auto在IE7中工作，但不在IE8中（是的，另一个奇怪的IE bug）。要解决此问题，您需要为IE8添加宽度：auto \ 9.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

或使用Bootstrap框架

更改分辨率时缩放图像

1 个答案: