0

2つの側面があるレイアウトを作成しています。左が 30%、右が 70% です。私はワイドスクリーンモニターを持っているので、すべての画像が希望どおりに表示され、十分なスペースが残っています。しかし、より低い解像度と最も一般的な 1024x768 では、私が作成した画像は左側には大きすぎて、境界線から右側に出てしまいます..どのようにすれば画像を自動的にサイズ変更して、より小さな解像度に収まるようにできますか?

CSS

#left {
  float:left;
  width:30%;
  height:100%;
  position:fixed;
  padding:20px;
}

#right {
  float:right;
  width:70%;
  height:100%;
  position:absolute;
  padding:40px 20px;
}
#left img {
  ??
}
4

4 に答える 4

1

max-widthと画像のパーセンテージ値を使用してみてください。このようにして、画像がそのパーセンテージを超えることはありません。

例えば：

img {
    max-width:90%;
}
于 2011-07-11T01:31:54.093 に答える
0

これはそれを行います：

#left img {
  width: 100%;
}
于 2011-07-11T01:32:59.027 に答える
0

overflow: hidden画像によっては、#leftdivを追加するだけです。

于 2011-07-11T01:30:11.770 に答える
0

これを行う方法の 1 つは、イメージを の背景に追加すること#left divです。

画像のサイズは変更されませんが、境界を越えて流れることもありません。

ブラウザは完全にはサポートされていませんが、CSS3 を使用して背景のサイズを変更できます。

background-size:100% 100%;画像サイズが全体に収まるようにしますdiv。ただし多少の歪みがある場合がございます。

于 2011-07-11T01:30:53.303 に答える