3

div内で画像のサイズを変更して配置するにはどうすればよいですか？

サイズ変更された画像を50x50pxのdivに表示する必要があります。また、それらをdivに集中させたいと思います。私がやりたいことを正確に示すために、この画像を下に作成しました。

ここに画像の説明を入力してください

画像の幅が大きい場合と高さが大きい場合にCSSが機能する必要があるという問題。

max-widthまたはmax-heightを使用してこのソリューションを見つけましたが、1つのオプション（より広い幅またはより大きな高さ）でのみ機能します。

div.img-crop-thumb
{
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
}
.img-crop-thumb img
{
    position: absolute;
    top: 0px;
    left: -50%;
    max-width: 30px;
    height: auto;
}
4

3 に答える 3

2

これが私の関数です（PHP）。私は動的な画像ファイルの呼び出しをたくさん行いますが

function remoteFileExists($url) {
    $curl = curl_init($url);

    //don't fetch the actual page, you only want to check the connection is ok
    curl_setopt($curl, CURLOPT_NOBODY, true);

    //do request
    $result = curl_exec($curl);

    $ret = false;

    //if request did not fail
    if ($result !== false) {
        //if request was ok, check response code
        $statusCode = curl_getinfo($curl, CURLINFO_HTTP_CODE);  

        if ($statusCode == 200) {
            $ret = true;   
        }
    }

    curl_close($curl);

    return $ret;
}

function pictureResize($imgDest, $width, $link){
    $default_pic = "default location"; //set a default image if none exists
    $exists = remoteFileExists($imgDest);
    if ($exists) {
        list($w_orig, $h_orig) = getimagesize($imgDest); //get size
        if($w_orig > $h_orig){ // if the width is greater than the height
            $ratio = $w_orig / $h_orig; // get the aspect ratio of the image
            $newWidth = $width * $ratio; // make a new width size
            $margin = round($newWidth/2); // find the margin
            $thisPic = '
                <div style="height:'.$width.'px; overflow:hidden; position:relative; width:'.$width.'px;">
                <img src="'.$imgDest.'" height="'.$width.'px" style="position:absolute; left:50%; margin-left:-'.$margin.'px;" /></div>'; 
        }else{
            $thisPic = '
                <div style="height:'.$width.'px; overflow:hidden; width:'.$width.'px;">
                <img src="'.$imgDest.'" width="'.$width.'px" /></div>'; 
        }
    }else{
        $thisPic = '
                <div style="height:'.$width.'px; overflow:hidden; position:relative; width:'.$width.'px;">
                <img src="'.$default_pic.'" width="'.$width.'px" height="'.$width.'px" style="position:absolute; left:50%; margin-left:-'.round(($width/2)-1).'px;" /></div>';
    }
    return $thisPic;
}

これは高さを中央に配置しませんが、幅を中央に配置します。そのように画像を呼び出します...

pictureResize($imgDest, /*set an int value for size*/, "set a string for location");

これが少なくともあなたを正しい方向に向けることを願っています

于 2013-03-10T05:16:57.907 に答える
1

JavaScriptの使用：

ワーキングデモ：http ：//jsfiddle.net/wV4tn/

（横向き、縦向き、正方形のサイズでスムーズに機能します！）

//Takes in image's original width/height and the container's width height
function scaletofit(imgw, imgh, contw, conth){
    var perc = 0;
    if((conth / contw) > (imgh / imgw)){
        perc = contw / imgw;
    } else {
        perc = conth / imgh;
    }
    return [Math.round(imgw * perc), Math.round(imgh * perc)];
}

divに集中させるには、必要に応じて、 andasORleft: 50%およびmargin-leftasを配置します。-imagewidth/2top: 50%margin-top-imageheight/2

于 2013-03-10T05:10:09.613 に答える
1

CSS3を使用しbackground-size: coverます。

これが実際の例です：http：//jsfiddle.net/HBPRv/。

そして、ここでドキュメントを読むことができます。

于 2013-03-10T05:16:51.423 に答える