html - 如果屏幕宽度低于指定数量，如何响应地修剪 div 的左侧和右侧？

Question

我想修剪一个 div 的左侧和右侧，假设它是一个 500px x 500px 的方形 div，当你缩放浏览器时。本质上它应该在左侧和右侧平均修剪这个 div 作为你在浏览器中缩放，当浏览器小于 1300px 时它应该开始发生。

<div class="trim-my-left-and-right"></div>

.trim-my-left-and-right {
    width: 500px;
    height: 500px;
}

Answer 1

我不确定您所说的“修剪左侧和右侧”是什么意思。但是您可以通过根据 body 标记或其他容器的宽度设置百分比宽度来创建响应式宽度。如果您想将其保持在特定宽度以上，您可以应用 min-width 属性。但是，您可能想要调查 min-width 和 max-width 的浏览器兼容性。

div#container {
  position:relative;
  width:100%;
  height:100%;
  padding:0px;
  max-width:700px;
  margin:0px auto;
  background-color:#AAA;
}

.trim-my-left-and-right {
  position:relative;
  width:50%;
  height: 500px;
  background-color:#000;
  margin:0px auto;
}

http://jsfiddle.net/9ypKp/