Question

我使用内联块来创建图库，每个图像都有自己的div和width。我在调整页面大小时遇到问题，图像会调整到屏幕宽度，这很好，但是当我下降到大约400px（移动区域）时，图像变得非常小。 / p>

无论屏幕宽度如何，如何确保图像保持良好的尺寸？

＆＃13;

*  { 
  box-sizing:border-box;
}

.container {
  width:80%;
}

section.portfolio {
  background:
}

section.portfolio .col {
  background:;
  width:23.3%; 
  padding:10px;
  margin: 5%;
  display:inline-block;
  vertical-align:top;
}

section.portfolio .col img {
  display:inline-block;
  vertical-align:top;
}

img {
  max-width:100%;
  height: auto;
  width: auto;
}

＆＃13;

<section class="portfolio">
    <div class="container">
        <div class="col">
            <img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg">
        </div>
        <div class="col">
            <img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg">
        </div>
        <div class="col">
            <img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg">
        </div>
    </div>
</section>

＆＃13;

Answer 1

将position:relative提供给您的父div，将position:absolute提供给子元素，使用以下代码：

<div class="col" style="position:relative">

          <img src="http://images3.nike.com/is/image/DotCom/PDP_HERO/843384_001_C_PREM/air-max-1-ultra-flyknit-shoe.jpg" style="position:absolute">

    </div>

这可能会解决您的问题。

Answer 2

您可以使用媒体查询并将宽度设置为300px（或您喜欢的任何内容）

@media screen and  (min-width:320px) and (max-width: 480px) { 
    section.portfolio .col {
      width:300px; 

        }
}

笔是here

另请参阅https://css-tricks.com/snippets/css/media-queries-for-standard-devices/了解各种移动维度

使用内联块属性调整响应图像大小

2 个答案: