改变分辨率时缩放图像

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。图片max-width:100%和height:auto在IE7中工作，但在IE8中不工作(是的，另一个奇怪的IE错误)。要解决这个问题，您需要为IE8添加width:auto9。

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

或使用Bootstrap框架