-7

我正在制作一个自动调整的网页，因此我可以将它用于任何设备。我已经修复了几乎所有的东西，所以它的大小可以正确调整，除了我的类别，它的 .hip div。当网络尺寸较小时，它们仅在彼此下方排列，但我希望实际的按钮/图像变小并跟随我的其他 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>

4

2 回答 2

1

不幸的是，您的 HTML 完全乱序，并且图像未设置为流畅地调整大小。事实上，如果不重写 HTML，就不可能实现更理想的库行为。

您的图像出现的原因是因为它们没有包装在任何与页面上存在的其他元素进行可管理交互的容器中。特别是，您#front-page的absolute位置给人一种视觉错觉，即它位于文档的顶部。正是同样的规则迫使图像忽略#front-page. 取消设置会让你的设计“崩溃”，但这是实现你想要的必要的第一步。

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

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

注意

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

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

编辑

基本原理

定位

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

容器

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

画廊

将容器设置为的另一个好处width: 100%是它可以随窗口缩放，这意味着所有基于百分比的子项（在本例中为您的图像）也将随窗口缩放。通常，您确实希望它在某个时候最大化（因此.wrap使用 a max-width: 1000px），但直到那时，尤其是对于画廊来说，这是您想要的行为。查询是一个额外的@media好处：由于 12.5% 的移动屏幕很小（在 iPhone 上只有 40 像素 x 40 像素），在较小的屏幕尺寸上，媒体查询将图像设置为 25% 而不是 12.5%，从而导致 80 像素80 像素图像。

由于在这种情况下您的缩略图最多只能为 162.5 像素 x 162.5 像素，因此，正如另一位海报所说，您还希望在使用它们之前在图像编辑程序中裁剪它们，否则您正在浪费疯狂的带宽。

于 2015-06-07T06:50:31.470 回答
0

几点观察：

  1. 图片尺寸 (5000px X 5000px) - 图片太大而无法在网络上显示。尺寸应进一步优化，将负载降低 70% 到 80%。
  2. HIP div 的位置- 为什么这些 div 出现在顶部。最佳做法是将所有这些 HIP div 包装在另一个 div 中，并将其放在 FOOTER div 的正上方。
  3. 图像位置的转换非常顺利，只能这样。我建议不要为不同的屏幕尺寸调整图像的大小，而是让图像低于其他图像 - 这是您可以期待的许多图像的最佳外观。否则，您将需要以 SLIDER 格式显示图像以适应较小的屏幕尺寸 - 同样这将非常耗时。
于 2015-06-07T06:03:06.143 回答