1

幅が広い画像のリストがあるので、トリミングします。overflow:hidden不要な部分を非表示にして拡大縮小を避けるために設定します。これらの画像を中央に配置したいのですが、何も機能しません。これはよくある質問ですが、どの答えも役に立ちませんでした。間違いだと思います。私より経験豊富な人が助けてくれませんか？

トランジション効果も追加されています。

 <div id="second" class="single">
     <ul>
         <li><a href="images/album/7.jpg" rel="lightbox[photos]"> <img src="images/album/7.jpg" alt=""/></a></li>
         <li><a href="images/album/8.jpg" rel="lightbox[photos]"> <img src="images/album/8.jpg" alt=""/></a></li>
         <li><a href="images/album/9.jpg" rel="lightbox[photos]"> <img src="images/album/9.jpg" alt=""/></a></li>
         <li><a href="images/album/10.jpg" rel="lightbox[photos]"><img src="images/album/10.jpg" alt=""/></a></li>
         <li><a href="images/album/11.jpg" rel="lightbox[photos]"><img src="images/album/11.jpg" alt=""/></a></li>
         <li><a href="images/album/12.jpg" rel="lightbox[photos]"><img src="images/album/12.jpg" alt=""/></a></li>
     </ul>
  </div>

cssコード

.single ul {
  list-style-type: none;
}

.single li {
  padding: 0px; 
  width: 160px;
  height: 240px;
  margin: 10px;
  overflow: hidden;
  float: left;

  -webkit-transition: box-shadow 0.5s ease;
  -moz-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  -ms-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
}

.single img {
  height: 240px;

}

.single li:hover {
  -webkit-box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
  box-shadow: 0px 0px 7px rgba(255,255,255,0.9);
}

更新1

画像のリストは以下のとおりです。循環している画像は他の画像に比べて幅が広くなっています。トリミングされています。中央に配置したい画像は、左側ではなく中央が見えるようになっています。

写真

更新2

写真の実際のサイズに関係なく、サムネイルの幅は160ピクセル、高さは240ピクセルである必要があります。一部の写真は、サイズを変更した直後に収まります。その他、幅が高さよりも大きいため、うまくフィットしません。そのため、トリミングするので、意味を持たせるために中央に配置する必要があります。人の肩ではなく顔が見えるようにするため。写真は私のウェブページに動的に追加されています。

更新3

960x640

960x460

640x960

640x960

4

2 に答える 2

1

画像を見ずにいるのは本当に難しいですが、一般的に言えば、あなたができることは次のとおりです。

1）中央に配置する必要のある画像にクラスを追加します。これを「中央に配置」と呼びます。

<div id="second" class="single">
<ul>
<li><a href="images/album/7.jpg" rel="lightbox[photos]"> <img src="images/album/7.jpg" alt=""/></a></li>
<li><a href="images/album/8.jpg" rel="lightbox[photos]"> <img class="centered" src="images/album/8.jpg" alt=""/></a></li>
<li><a href="images/album/9.jpg" rel="lightbox[photos]"> <img src="images/album/9.jpg" alt=""/></a></li>
<li><a href="images/album/10.jpg" rel="lightbox[photos]"><img src="images/album/10.jpg" alt=""/></a></li>
<li><a href="images/album/11.jpg" rel="lightbox[photos]"><img src="images/album/11.jpg" alt=""/></a></li>
<li><a href="images/album/12.jpg" rel="lightbox[photos]"><img class="centered" src="images/album/12.jpg" alt=""/></a></li>
</ul>
</div>

2）オーバーフローした幅の半分に等しい負の左マージンを追加します

たとえば、2番目の画像の幅が200ピクセルだとします。

.single li160pxなので、40pxがオーバーフローしました。このクラスを適用できます。

.single img.centered {
    margin-left:-20px; /* half of the overflown width */
}

中央でトリミングされます。「デモ」。

PSすべての画像を中央に配置したい場合は、クラスを追加する必要はありません。

より具体的な回答が必要な場合は、画像の幅/8を入力してください。

于 2012-10-06T17:02:54.110 に答える
0

@GionaFの回答と以下のスクリプトを組み合わせると、望ましい結果が得られました。

   $(document).ready(function() {
     $(".single img").load(function() {
        if($(this).width() > 160) {
                $(this).addClass('centered');
            }
        });
    });

ここに画像の説明を入力してください

于 2012-10-06T18:45:23.067 に答える