image - サイズを変更せずに画像サイズを固定する

Question

私はdivどちらがwidth:500px;あり、height:170px;

データベースからランダムな画像を取得して表示するjqueryスライドショーがdiv含まれています。

問題は、画像がユーザーによってアップロードされ、任意のアスペクト比/任意のサイズになる可能性があることです。

divを使用してサイズを変更せずに画像を合わせる必要があります

style='height:x; width:x;

基本的には、すべての画像が適切かつ実際の品質で表示されるようにしたいと考えています。

サイトの他の部分にフルサイズ/品質で表示されるため、アップロードできる画像のサイズを制限したくありません。

解決策を提供できますか？

score 8 · Accepted Answer

CSS を使用して、必ずしも画像の縦横比を変更することなく、スライドショーの画像のサイズを設定できます。

スライドショー.img{
    高さ:170px
    width:auto;/*アスペクト比を維持*/
    最大幅:500px;
}

元のサイズが小さい場合、画像はスライドショーよりもスリムになる可能性があることに注意してください。

score 5 · Accepted Answer

max-widthCSS のプロパティを使用できるはずです。これを行う場合、幅または高さを指定する必要はありません。

あなたの HTML:

<div id="yourContainer">
    <img src="imagePath" />
</div>

そしてあなたのCSS：

#yourContainer {
    width: 500px;
    height: 170px;
}

#yourContainer img {
    max-width: 100%;
    max-height: 100%;
}

これにより、イメージがコンテナー内の中央に配置されるわけではありませんが、作業は完了します。

4 に答える 4