3

私は撮影監督のためのポートフォリオに取り組んでいます。彼らはまた、多くの写真を撮り、縮小したときに画像の美学が失われないように、画像のサムネイルの比率を維持したいと考えています。

私が探しているのは、画像が元の比率を維持するようにする方法ですが、それらをスケーリングしてコンテナー div に適合させる方法です。（幅と高さを設定した場合）

私は基本的にすべてを試しました。比例して画像をスケーリングする従来の方法を含めます。

background:url(../images/banner.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

これはスケーリングにはうまく機能しますが、それでも画像が途切れます。（これは私が避けようとしているものです）

私は覚醒剤のツイーカーのように検索してきましたが、この問題を解決するものは何も見つかりません. 思い通りに解決できないものを探しているのかもしれません。

とにかく.. tl;dr:

サムネイルは元の画像の比率を維持したいが、約 3 倍小さくし、コンテナ div に収まるようにしたい。（幅と高さを固定して）これを達成する方法について何かアイデアはありますか？

これが私が達成しようとしていることの例です。

4

1 に答える 1

0

divと画像の比率に従って幅をいくつかの％に設定しようとしましたか..JavaScriptを呼び出して画像とdivの幅を確認し、それに応じて画像のcss属性「幅：」を設定して、スクリプトを使用してパーセンテージを要求し、高さをautoにします...高さが大きい場合は逆ですが、自動設定が機能しない場合は、たとえば手動で比率を設定してみてください

function set()
{
var img=document.getElementById('anyimg');
var iwidth=img.width;
var iheight=img.height;
var wr,hr;
var mydiv = document.getElementById('anydiv');
divH=mydiv.height;
divW=mydiv.width;
wr=iwidth/divW;
hr=iheight/divH;
if(hr>wr)
{
image.height=divH;
image.width=iwidth/hr;
else
{
image.height=divH;
image.width=iwidth/hr;
}}
于 2013-04-14T09:23:47.117 に答える