Question

我正在使用媒体查询来定位移动电话。现在我的目标是0 - 699px max-width。我有一张 li ，里面有一张图片。我想要做的是让图像和 li 在视口伸展时稍微扩展一下。

因此，如果我将视口从0 - 699px扩展。图像和 li 在宽度和高度上逐渐变大。没有太大的差异，但很明显。

在我的例子中，一切都已修复。拉伸视口的距离无关紧要，尺寸保持不变。

如果视口伸展，我如何拥有 li 或div及其内容在高度和宽度上拉伸一点？

以下是我一直在做的事情：

http://codepen.io/daydreamer/pen/jxlcn

一切都是固定的。当我水平调整视口的宽度时，我希望 li 和img更大一些。

以下是我正在使用的css规范：

.picture 是图片容器 .list li是 li li img 是图片

 .picture {
   width:100px;
   min-height:100px;
   max-height:auto;
   position:absolute;
   left:0;
 }

 .list li {
   background:silver;
   min-height:100px;
   position:relative; 
 }

 li img {
  max-width:100%;
  height:auto;
 }

Answer 1

示例代码中的li和div是浏览器宽度的100％。您可以使用Chrome调试器并将鼠标悬停在文档树中的元素上来观察此情况。

您的图片未随其展开，因为您在.picture容器上设置了固定的100px宽度。如果您取出它，图像将与其实际宽度或浏览器视口的宽度一样多 - 以较低者为准。如果您希望列表项的高度与图片的高度相匹配，则需要在position: absolute

上取出left:0和.picture

http://codepen.io/anon/pen/BAqir

.picture {
  min-height:100px;
  max-height:auto;
}

提示：确保正确嵌套你的李和div。你并不真正需要那里的div，并且可以直接在li上使用该课程。

你如何使用浏览器制作div及其内容？

1 个答案: