html - 上部の画像オーバーフロー?

Question

私が取り組んでいるウェブサイトがあり、画像を上部にオーバーフローさせ、下部に揃えようとしています。

現在、DIV の高さは 500PX で、画像がそれよりも大きくなると、オーバーフローが下部に隠されます。問題は、画像が本当に奇妙に見えることです。サイトをレスポンシブにする過程にあるため、画像を伸ばす必要があります。私が知っている画像はぼやけますが、これらは単なる一時画像です。

私の質問は、画像の下部をDIVの下部に合わせて固定し、大きく引き伸ばすとページの上部で負のようにオーバーフローする方法はありますか?

score 2 · Accepted Answer

画像の上部ではなく下部を表示しようとしていると思いますか? その場合は、セレクター#myGallery imgで画像の位置を上ではなく下に変更します。

#myGallery img {
    display:none;
    position:absolute;
    bottom: 0;  // change this from top to bottom
    width: 100%;
    left:0;
}

score 0 · Accepted Answer

サイズに関係なく、DIV の高さを定義するには画像の高さが必要なため、DIV から高さを削除し、画像から position: absolute を削除することをお勧めします。

レスポンシブスライドショーでは、次の CSS を使い始めました。

.slide {
  width: 100%;
  float: left;
  margin-right: -100%;
}

これにより、絶対配置のようにそれらを互いに積み重ねることができますが、DIV はスライドの高さに反応します。

ただし、下部にも白いフェードがあります。これが質問の理由の一部であると思います。そのフェードを小さなビューで機能させたいということです。

そのためには、 img#fadeimage にが必要ですがposition: absolute; bottom: 0; height: 100%、上部に空きスペースができるようにイメージをビルドする必要がある場合もあります。

2 に答える 2