-7

どのデバイスでも使用できるように、自動調整する Web ページを作成しています。サイズが適切に調整されるように、カテゴリ、その .hip div を除いて、ほとんどすべてを修正しました。Web サイズが小さい場合にのみ互いの下に並んでいますが、実際のボタン/画像を小さくして、他の 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

0

いくつかの観察:

  1. 画像サイズ (5000px X 5000px) - 画像が大きすぎて Web で表示できません。スコープの負荷を 70 ～ 80% 削減して、サイズをさらに最適化する必要があります。
  2. HIP div の位置- これらの div が上部に表示される理由。ベスト プラクティスは、これらすべての HIP div を別の div でラップし、それを FOOTER div の真上に配置することです。
  3. 画像位置の遷移は非常にスムーズに行われており、そのままにしておきます。さまざまな画面サイズで画像のサイズを調整するのではなく、画像を上下に並べることをお勧めします。これは、これらの多くの画像に期待できる最高のルック アンド フィールです。または、画面サイズを小さくするために画像を SLIDER 形式で表示する必要があります。これも少し時間がかかります。
于 2015-06-07T06:03:06.143 に答える