段落と画像を固定小数点に収める

Question

段落と画像を含む複数のdivを作成する予定です。画像の大きさと段落はすべて異なっています。 divの高さは固定されており、段落の後ろの高さに合わせて画像の高さが変更されます。画像は完全に私はオーバーフローを行うことができませんでし意味のdivに表示されるはずです：divの

.container { 
 
    border: 1px solid #000; 
 
    height: 250px; 
 
}

<div class='container'> 
 
    <p>This is random information, the height could be differnet depened on the content of the paragraph</p> 
 
    <a href='http://google.ca'> 
 
    <img src="http://lorempixel.com/300/200/nature/"> 
 
    </a> 
 
</div>

に隠さしかし、時間の画像のほとんどがオーバーフローになり、すべてのソリューション私はそこにありますCSSだけで画像をdivに収めることができますか？

Answer 1

画像の高さを低くしてdivの高さを調整してください！私は完全に理解してかはわからないが、あなたがイメージがそれから抜け出すないようにしたい場合は、あなたは、単にオーバーフローするコンテナを設定することができ、コンテナのこのコード

.container { 
 
    border: 1px solid #000; 
 
    height: 250px; 
 
    display: block; 
 
    overflow-y: scroll; 
 
} 
 

 
.container p { 
 
    word-wrap: break-word; 
 
}

<div class='container'> 
 
    <p>This is random information, the height could be differnet depened on the content of the paragraph This is random information, the height could be differnet depened on the content of the paragraph</p> 
 
    <a href='http://google.ca'> 
 
    <img src="http://lorempixel.com/300/170/nature/"> 
 
    </a> 
 
</div>

Answer 2

に従ってください：隠されました;その方法では、それはコンテナ内に含まれます。

Answer 3

イメージ自体にCSSを追加できます。これにより、親の寸法に基づいて画像のmax-heightとmax-widthが決定されます。この場合、height: 250px;。これに伴う唯一の問題は、パディングが必要な場合は、calcを画像のためにmax-heightに追加する必要があります（パディングを差し引くため）。私はこのフィドルの "ノーマライズCSS" を追加した

注

https://jsfiddle.net/7yjhz0dc/2/

.container { 
    border: 1px solid #000; 
    height: 250px; 
    padding: 20px; 

    a { 
    display: block; // you always want this or inline-block for anchor tags wrapped around images, so the whole image is clickable 
    } 

    p { 
    margin-top: 0; 
    } 
} 

.img-responsive { 
    display: block; 
    max-width: 100%; 
    max-height: calc(100% - 20px); // 20px is the parent container's padding 
} 

HTML

<div class='container'> 
    <p>This is random information, the height could be differnet depened on the content of the paragraph</p> 
    <a href='http://google.ca'> 
    <img src="http://lorempixel.com/800/500/nature/" class="img-responsive"> 
    </a> 
</div> 

あなたが見ることができる画像の大きさ（ URLから取得）はこの例では800px x 500pxですが、画像はまだ正しくスケーリングされています。

あなたはpaddingは、コンテナに適用したくない場合は、.containerから削除し、代わりに100%;するmax-heightを調整します。