0

ブラウザのサイズ変更時に画像のサイズを変更したいのですが、その際に画像の左と下の両方に 30px の境界線を維持したいと考えています。このように: http://www.jennyvansommers.com/non-commissioned/corner/#347 CSS を使用してこれを行う簡単な方法はありますか?

前もって感謝します

4

2 に答える 2

1

幅と高さが 100% のコンテナー内に画像を配置し、左と下に 30 ピクセルのパディングを配置し、その内部の画像も幅と高さが 100% になるようにします。

例えば

<div id="imageWrapper">
  <img src="imageurl" />
</div>

<style> 
    #imageWrapper{width:100%;height:100%;padding:0 0 30px 30px}
    #imageWrapper img{width:100%;height:100%;}
</style>

ラッパーはウィンドウを埋め、画像はパディングまでラッパーを埋めます。ただし、画像の形状がウィンドウの形状と異なる場合は、これにより画像が引き伸ばされる可能性が高くなります。画像のアスペクト比を維持したい場合は、img の幅または高さだけを設定してみてください。両方ではありません。

お役に立てれば ：）

編集：画面をいっぱいにするかどうかわからない場合は、ウィンドウが閉じていない限り、画像の自然なサイズを維持したい場合は、幅と高さの代わりに img{max-width:100% と img{max-height:100% で遊んでください。それより小さい..

于 2012-06-09T13:21:23.227 に答える
0

最小幅と最小高さを30pxに設定し、相対的な幅と高さを50％にするか、この種の効果を実現する相対的なサイズを設定することを期待します。

.image-resize {
  min-hieght:30px;
  min-width:30px;
  height:50%;
  width:50%;
}

申し訳ありませんが、国境であなたの質問を読み間違えましたか？またはマージン？のような何か

margin-left:30px;
margin-bottom:30px;

高さと幅の代わりに、透明な境界線を使用すると思われるborder-leftとborder-bottomを使用できますが、マージンを優先します。しかし、相対的なサイジングはあなたが望むものだと思いますか？したがって、ブラウザでサイズを変更するか、実際には親を基準にしてサイズを変更するため、DOMのどこに存在するかによって異なります。

于 2012-06-09T12:47:30.780 に答える