1

現在、ホームページとしてフルスクリーン画像を持つワードプレスのテーマを変更しようとしています。現在、ブラウザで完全にうまくスケーリングされますが、唯一の問題は、元の画像サイズよりも小さくならないことです。縦横比を維持したまま大きくなりますが、ウィンドウのサイズを小さくしても、デフォルトの画像サイズよりも小さくなりません。

この部分のテーマの CSS は次のとおりです。

/* full screen slides */
.slides.full {
  position: absolute;
  top: 0;
  left: 0;
  background: #373432;
  width: 100%;
  height: 100%;
  max-height: 100%;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.slides.full img {
  min-height: 100%;
  min-width: 100%;
  width: auto;
  position: absolute;
  top: 0;
  left: 0;
}

画像を元のサイズよりも小さくする別の方法を使用しましたが、ブラウザの高さに固執せず、その下に灰色の背景がありました。

私が達成しようとしていることを行うために投稿したcssを変更するのを手伝ってくれる人はいますか? それは大歓迎です！ありがとう。

4

3 に答える 3

0

に と を追加しようmax-widht: 100%とmax-height: 100%しました.slides.full imgか?

それはただの勝手な推測です。実際の例を見ると役に立ちます。

于 2013-03-01T01:20:23.827 に答える
0 
 .slides.full img {
  max-width:100%; /* lower virsion of IE won't work width max-width */
  width:100%;         /* for IE */
}
于 2013-03-01T07:17:14.060 に答える
0

これにより、画像の適切な比率が維持されます

   .slides.full img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }

に変更するheight:100%と、サイズ変更時に画像が引き伸ばされます

于 2013-03-01T01:41:31.840 に答える