每行 6 张图像，无论屏幕大小如何，图像大小调整 - html css3

Question

我正在尝试实现两行图像（即第一行 6 个图像和第二行 6 个图像）。当我的屏幕尺寸在 320px 和 480px 之间时，它满足了我的要求。但是，我无法针对其他屏幕进行调整。

请在此处查看此 link：sample html page

我在这里发现了一个类似的问题 --> Whosebug qs

但是，这是不同的实现方式。理想情况下，我希望两行图像保持原样，但当我的屏幕尺寸增加时，图像的尺寸应该变大。

任何 tips/ideas 或实现此类解决方案的资源都将不胜感激。

谢谢！

Answer 1

我不太确定你的问题，如果你的代码提供一点代码会有帮助。无论如何我会去做这样的事情：

CSS

#image {
    min-width: 320px; /*Sets a width of 320px*/
    width: 16.66%; /*If page gets bigger the image will become 1/6 of page's width*/
}

基本上，设置 min-width，然后将其设置为您希望的页面百分比。当 min-width 为真时，width 将仅使用。

编辑

我刚刚意识到我的回答有点完全错误（疲劳是一个因素）。考虑以下示例：

HTML

<div id="holder">
    <image class="image" src="">
    <image class="image" src="">
    <image class="image" src="">
    <image class="image" src="">
    <image class="image" src="">
    <image class="image" src="">
</div>

CSS

#holder {
    min-width: 320px;
    width: 100%;
}

.image {
    width: 16.66%;
    position: relative;
}

简单来说，就是让6张图片的宽度最小为320px。现在，如果屏幕尺寸变得比 320px 小，#holder，即保存图像的项目，将离开页面。然而，如果页面变得比 320px 大，那么每个图像将占用 #holder 宽度的 16.66%（1/6），即页面宽度的 1/6。因此，使用这两个组合值，您可以使图像扩展，但绝不会小于。

Answer 2

#sortable li {
  float: left;
  background: #fff;
  vertical-align: top;
  box-shadow: 0 0 5px #ddd;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
#sortable li:nth-child(6n+1) {
  clear: left;
}

Answer 3

也许会有帮助

*{
    padding: 0;
    margin: 0;
}

.wrapper > div {
    background: #737373;
    float: left;
    position: relative;
    width: 16.66666666666667%;
    padding-bottom: 16.66666666666667%;          
}
.wrapper > div img {
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
}

<div class="wrapper">
<div>
    <img src="http://g02.a.alicdn.com/kf/HTB1LApRIXXXXXcAXXXXq6xXFXXXC/Car-Stereo-GPS-Navigation-for-Mazda-6-2002-2008-Auto-Radio-DVD-Player-Multimedia-Head-Unit.jpg" alt="" />
</div>
<div>
    <img src="https://static.artfire.com/uploads/product/2/592/71592/8271592/8271592/large/380_auto_nickel_bullet_push_pins_-_set_of_4_807a34be.jpg" alt="" />
</div>
<div>
    <img src="http://www.steptwo.cz/media/catalog/product/d/e/detska-postel-auto-corvette-821500-c.jpg" alt="" />
</div>
<div>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTi6yvNhbL_qWDmf0CqCjObIKLOEV8KobtxeYsNPnk0tynHaer0xw" alt="" />
</div>
<div>
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ_WGLGUhf-E74PgPVnISsV2RkX4ahN-jhF7UpOghGmyrI8iTn_bw" alt="" />
</div>
<div>
    <img src="http://g02.a.alicdn.com/kf/HTB1LApRIXXXXXcAXXXXq6xXFXXXC/Car-Stereo-GPS-Navigation-for-Mazda-6-2002-2008-Auto-Radio-DVD-Player-Multimedia-Head-Unit.jpg" alt="" />
</div>
    
<div>
    <img src="http://g02.a.alicdn.com/kf/HTB1LApRIXXXXXcAXXXXq6xXFXXXC/Car-Stereo-GPS-Navigation-for-Mazda-6-2002-2008-Auto-Radio-DVD-Player-Multimedia-Head-Unit.jpg" alt="" />
</div>
<div>
    <img src="https://static.artfire.com/uploads/product/2/592/71592/8271592/8271592/large/380_auto_nickel_bullet_push_pins_-_set_of_4_807a34be.jpg" alt="" />
</div>
<div>
    <img src="http://www.steptwo.cz/media/catalog/product/d/e/detska-postel-auto-corvette-821500-c.jpg" alt="" />
</div>
<div>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTi6yvNhbL_qWDmf0CqCjObIKLOEV8KobtxeYsNPnk0tynHaer0xw" alt="" />
</div>
<div>
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ_WGLGUhf-E74PgPVnISsV2RkX4ahN-jhF7UpOghGmyrI8iTn_bw" alt="" />
</div>
<div>
    <img src="http://g02.a.alicdn.com/kf/HTB1LApRIXXXXXcAXXXXq6xXFXXXC/Car-Stereo-GPS-Navigation-for-Mazda-6-2002-2008-Auto-Radio-DVD-Player-Multimedia-Head-Unit.jpg" alt="" />
</div>    
</div>

Fiddle

Answer 4

具有 angular-material 的 flex 辅助属性 (fiddle demo):

<style>
  .image-container{
    height: 200px;
    background-size: cover;
  }
  .image-container{
    background-image: url(http://placehold.it/#abc/300x600)
  }
</style>
<div layout="row" id="slides-container">
  <div flex="33" class="one-third" layout="row">
    <div flex="50" class="one-sixth image-container"> </div>
    <div flex="50" class="one-sixth image-container"> </div>
  </div>
  <div flex="33" class="one-third" layout="row">
    <div flex="50" class="one-sixth image-container"> </div>
    <div flex="50" class="one-sixth image-container"> </div>
  </div>
  <div flex="33" class="one-third" layout="row">
    <div flex="50" class="one-sixth image-container"> </div>
    <div flex="50" class="one-sixth image-container"> </div>
  </div>
</div>

每行 6 张图像，无论屏幕大小如何，图像大小调整 - html css3

6 images per row no matter the screen size with image size adjusting - html css3

html

css

media-queries