2017-03-24 17 views
0

htmlとcss(jqueryソリューションもOK)を使用して、小さな親div(画像のサイズよりも小さい)に画像を入れるにはどうすればいいですか?画像はサイズ変更や切り抜きをしてはならず、画像の表示は親divの表示に制限する必要があります。画像はdiv2の中にあるかもしれません(必ずしもそうではありません)。画像のサイズを変更せずに小さな親div内に画像が含まれています

enter image description here

絵のように画像はDIV1のそれよりも大きく、画像の視認性は、親DIV(DIV1)に制限されます。別のdiv(div3)は画像のサイズに関係なくdiv1の直下に配置されます。与えられた画像では植木鉢の底部には、単に現実のその部分での説明のために示されている:

background-position: bottom; 

NBのように示されている画像の焦点の任意の懸念があるですdiv1の外に隠れてしまいます。

答えて

0

、画像の周りのdivコンテナを作成し、高さのためにそれを設定し、それがオーバーフロー隠されます

.image-container { 
 
overflow: hidden; 
 
height: 250px; 
 
border: 1px solid red; 
 
} 
 

 
img { 
 
width: 100%; 
 
}
<div class="image-container"> 
 
<img src="https://c1.staticflickr.com/4/3939/15487040296_90539d40f9_b.jpg"> 
 
</div>

+0

私はこのコードを使用している間、イメージは親divにサイズ変更されると思う:[フィドル参照](https://jsfiddle.net/LalasMuathasim/j59eh582/) –

+0

私は幅を設定する必要があると思います:auto;代わりに100%..考えてくれてありがとう –

+0

幅を静的な数値に設定してからサイズを変更しないでください。 –

0

私の知る限りでは、背景画像を自動的にトリミングされます彼らは要素の境界を越えて行きます。

divbackground-imageとして画像を設定することができます。イメージが大きすぎてdivを超えてクロップされた場合は、background-sizeプロパティを使用することができ、2つの非常に有用な値、containおよびcoverがあります。それは完全にあなたのdiv内部に含まれるまで

div { 
    background-image: url("path/to/image.jpg"); 
    background-size: contain; /* or cover */ 
} 

background-size: containでは、背景画像がリサイズされます。一方、background-size: coverは、あなたのdivがイメージによって完全に覆われていることを確認します。

あなたの質問を正しく理解していただきたいと思います。

関連する問題