Question

我有4个图像，我希望它们能够动态调整大小，因此它们总是显示在一行上，没有间隙（也就是说，无论如何，所有4个应始终占据封闭DIV的整个宽度DIV是宽/窄的。）

示例代码在这里：http://codepen.io/pnoeric/pen/YGXOJb

＆＃13;

.enclosure {
  width: 532px;    // arbitrary size - could be '100%' or '312px'
  border: solid 2px red;
}
.sprite {
  float: left;
  width: 100px;
  height: 30px;
}
/*
       all sample images are 100x30
    */

.s1 {
  background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqwGCIaDwDynzLuM-YQaf6hbKOrPZ7X5kPbBXeG2xONmjg7wQAhw');
}
.s2 {
  background: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSZ7q4ghxvj5iOSHtJCf0UHMbh_JFnLLJEKH4kqtDfcB70-1T_jA');
}
.s3 {
  background: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTjcLooOn0vKrelH5ecjYIFYSEKl2AE64VqoLcxtyBRnzESArTKFg');
}
.s4 {
  background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTTorTZRr54yI3fsL-X6xtXfnkbtATCqWF_ZIWF9g4QvsPg5g09');
}

＆＃13;

<h3>
      THE GOAL: get each image below to stretch (or shrink) to
      fill enclosure with no gaps... example here should have
      each image stretch to 133px (532 / 4) 
    </h3>

<div class='enclosure'>
  <div class='sprite s1'></div>
  <div class='sprite s2'></div>
  <div class='sprite s3'></div>
  <div class='sprite s4'></div>
</div>

＆＃13;

这可能吗？或者我是否需要返回<img>标签和某种表格？

Answer 1

当您需要响应时，您应该使用百分比作为尺寸。

＆＃13;

.enclosure {
  width:500px;    // arbitrary size - could be '100%'
  border:solid 2px red;
}

.sprite {
  float:left;
  width:25%;
  height:30px;
  background-repeat:no-repeat !important;
  background-size: 100% 100% !important; /* you can use other options like cover */
}

/* all sample sprites are 100x30 images -- yes in the real code I actually pull them all from one background image, like real CSS sprites :-) */

.s1 { background: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqwGCIaDwDynzLuM-YQaf6hbKOrPZ7X5kPbBXeG2xONmjg7wQAhw'); }

.s2 { background:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSZ7q4ghxvj5iOSHtJCf0UHMbh_JFnLLJEKH4kqtDfcB70-1T_jA'); }

.s3 { background:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTjcLooOn0vKrelH5ecjYIFYSEKl2AE64VqoLcxtyBRnzESArTKFg'); }

.s4 { background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTTorTZRr54yI3fsL-X6xtXfnkbtATCqWF_ZIWF9g4QvsPg5g09'); }

＆＃13;

<div class='enclosure'>
  <div class='sprite s1'></div>
  <div class='sprite s2'></div>
  <div class='sprite s3'></div>
  <div class='sprite s4'></div>
</div>

＆＃13;

Answer 2

_{让我们看看它可能也适用于垂直精灵但你必须测试它。}

如果您有单独的图像，则需要包含以下提示：

使用background-size:contain这样我们可以覆盖所有动态空间。
为容器使用%个单位

请查看此代码：

.enclosure {
  border:solid 2px red;
}
/*Add the clear for the floated elements*/
.enclosure:after {
  content:"";
  display:table;
  clear:both;
}
.sprite {
  float:left;
  /*Use % for your dimensions all inline 25%*/
  width:25%;
  /*This padding keeps the proportion of the original size 100x30*/
  padding-top:7.5%;
  background:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqwGCIaDwDynzLuM-YQaf6hbKOrPZ7X5kPbBXeG2xONmjg7wQAhw') no-repeat center;
  background-size:contain;
}
.s1 { background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTqwGCIaDwDynzLuM-YQaf6hbKOrPZ7X5kPbBXeG2xONmjg7wQAhw'); }
.s2 { background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSZ7q4ghxvj5iOSHtJCf0UHMbh_JFnLLJEKH4kqtDfcB70-1T_jA'); }
.s3 { background-image:url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTjcLooOn0vKrelH5ecjYIFYSEKl2AE64VqoLcxtyBRnzESArTKFg'); }
.s4 { background-image:url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTTorTZRr54yI3fsL-X6xtXfnkbtATCqWF_ZIWF9g4QvsPg5g09'); }

<div class='enclosure'>
  <div class='sprite s1'></div>
  <div class='sprite s2'></div>
  <div class='sprite s3'></div>
  <div class='sprite s4'></div>
</div>

响应式布局 - 连续4个精灵，拉伸/收缩到外壳

2 个答案: