页面上的动态组件大小

Question

我正在制作一个自动调整的网页，以便我可以将它用于任何设备。我已经修复了几乎所有内容，因此它的大小可以适当调整，除了我的类别，它的 .hip div。它们仅在网页较小时彼此排成一行，但我希望实际 Buttons/images 变小并跟随我的其他 div。我不知道为什么这行不通。

图片不会改变大小只会移动。我希望他们留在同一个地方。只向上移动变小，但是看

.hip {
  
  display: inline-block;
  height: 150px;
  width: 150px;
  max-width: 150px;
  overflow: hidden;
  position: relative;
  top:0px;
  
}
.hip:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.hip:hover img {
  -webkit-filter: blur(0);
}
.hip:hover button {
  background: rgba(0, 0, 0, 0.5);
  -webkit-filter: blur(0);
}
.hip img {
  -webkit-filter: grayscale(0.5) blur(10px);
  position: absolute;
  z-index: 2;

  top: -10px;
  left: -10px;
  width: 210px;
  height: 200px;

}
.hip button {
  background-color: transparent;
  border: 1px solid white;
  color: white;
  font-weight: 400;
  letter-spacing: 2px;
  padding: .3em 1em;
  position: relative;
  z-index: 10;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 0.83em;
}

<div class='hip'>
  <a href="barnevakt.html"><img src='http://www.izoncam.com/files/2015/03/babysitter.jpg'width="150" height="150"  />
  
  <button>Barnevakt</button></a>
</div>

<div class='hip'>
  <img src='http://eltying.com.pl/wp-content/uploads/2015/02/Czym-najlepiej-malowa%C4%87-%C5%9Bciany.jpg' width="150" height="150"/>
  <a href="maling.html"><button>Maling</button></a>
</div>

<div class='hip'>
  <a href="renovering.html"><img src='http://www.michanikos.gr/uploads/92f19f6fa1ae850d5be16672b4688868.jpg'width="150" height="150" />
  <button>Oppusing</button></a>
</div>
<div class='hip'>
  <a href="hagearbeid.html"><img src='https://img0.etsystatic.com/020/1/6791412/il_fullxfull.482239814_qief.jpg'width="150" height="150" />
  <button>Hagearbeid</button></a>
</div>

<div class='hip'>
  <a href="hundegåing.html"><img src='http://1.bp.blogspot.com/-Q069CqhGSxE/VIwYNYTnddI/AAAAAAAABdY/7bWjxwD5k8g/s1600/dog-walker.jpg' width="150" height="150"/>
  <button>Dyrepass</button></a>
</div>

<div class='hip'>
  <a href="skolehjelp.html"><img src='https://adhdteacher.files.wordpress.com/2010/09/school_sleeper.jpg'width="150" height="150" />
  <button>Skolehjelp</button></a>
</div>

<div class='hip'>
  <a href="dugnader.html"><img src='http://upload.wikimedia.org/wikipedia/commons/b/bd/EVS_volunteer_project_within_Nevitsky_Castle_reconstruction.jpg' width="150" height="150"/>
  <button>Dugnader</button></a>
</div>

<div class='hip'>
  <a href="måking.html"><img src='http://www.activehealthinstitute.com/wp-content/uploads/2010/12/snowIQ_-_winter_street_shovelling60471.jpg' width="150" height="150"/>
  <button>Måking</button></a>

Answer 1

少量观察：

图片大小 (5000px X 5000px) - 图片太大，无法在网络上显示。应进一步优化尺寸，使示波器负载降低 70 到 80%。
HIP 的位置 divs - 为什么这些 divs 出现在顶部。最佳做法是将所有这些 HIP div 包裹在另一个 div 中，并将其放在 FOOTER div.
图像位置的过渡发生得非常顺利，只能这样。我建议不要为不同的屏幕尺寸玩弄图像大小，而是让图像一个比另一个低 - 这是您对这么多图像所期望的最佳外观。否则，您将需要以 SLIDER 格式显示图像以适应较小的屏幕尺寸 - 同样，这会非常耗时。

Answer 2

不幸的是，您的 HTML 完全出问题了，图像没有设置为流畅地调整大小。事实上，如果不重写您的 HTML.

，可能无法实现更理想的图库行为

您的图像之所以以这种方式显示，是因为它们没有包装在与页面上存在的其他元素可管理地交互的任何容器中。特别是，您的 #front-page 有一个 absolute 位置，给人一种它位于文档顶部的视觉错觉。这是强制图像忽略 #front-page 的相同规则。取消设置将使您的设计 "break," 但这是实现您想要的目标的必要的第一步。

这是一个工作示例，说明（我假设）您要追求的目标。我怀疑更复杂的媒体查询会产生更好的结果，但这是一个更易于维护的文档的起点：

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

注意

<div class="mock-image"></div>

表示我懒得添加的 <img> 标签，但对于任何 1:1 尺寸的图像，其行为应该保持不变。作为一个额外的好处，设置 <img> 的 padding 而不是 height 将允许您为不是 1:1.[=49 的图像保持一致的纵横比=]

编辑

理由

定位

保持简单。默认情况下，元素在文档中的位置为 static，而大多数布局元素为 display: block，这意味着它们相互堆叠。这很好。将它们转换为 relative 几乎没有缺点，并且通常会增强默认行为（启用 z-indexing 等）。如果您注意到，在 <body>（<header>、.splash、.gallery 和 <footer> 的直接子元素的四个元素中，它们都是static 或 relative。您不必保留那些 class 名称，但我建议保留几乎所有个元素 static 或 relative，很少有特定的例外。当然，您应该保留布局容器 static 或 relative。使用 position: absolute 或 fixed 会将它们从文档流中移除，这会产生非常不直观的结果。

容器

您还会注意到，在有内容的地方（.guts 和 .mock-image 元素），内容被包装在容器中（分别为 .splash 和 .gallery ).这些容器是为了降低复杂性。我们只有一张 .gallery，而不是让八张图片与 .splash 对接。处理两个交互元素比处理九个元素更容易管理，这是一个简单的案例。复杂性只会从这里增加。此外，它们都设置为 width: 100%，这意味着只要它们位于 relative 或 static，它们就会始终堆叠在彼此之上，这正是那种您想要的可预测行为。

图库

将容器设置为 width: 100% 的另一个好处是它可以随 window 缩放，这意味着所有基于百分比的子项（在本例中为您的图像）将随 window 也是。通常你确实希望它在某个时候达到最大值（因此 .wrap 和 max-width: 1000px），但在那之前，特别是对于画廊，这是你想要的行为。 @media 查询是一个额外的好处：因为 12.5% 的移动屏幕很小（在 iPhone 上它只有 40px x 40px），在较小的屏幕尺寸上，媒体查询将图像设置为 25% 12.5%，生成 80 像素 x 80 像素的图像。

因为在这种情况下你的缩略图最多只能是 162.5px x 162.5px，正如另一位发帖人所说，你也想在使用它们之前在图像编辑程序中裁剪它们，否则你就是在浪费疯狂的带宽。

页面上的动态组件大小

Dynamic component size on page

html

css

adjustment