3

如何在 div 中调整图片大小和对齐图片？

我需要在 50x50px div 上显示调整大小的图像。我还希望它们集中在 div 上。我在下面制作了这张图片，以准确显示我想要做什么。

在此处输入图像描述

问题在于，当图像的宽度较大且高度较大时，CSS 需要工作。

我使用 max-width 或 max-height 找到了此解决方案，但它仅适用于一个选项（更大的宽度或更大的高度）：

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中，根据您的需要，将left: 50%and margin-leftas -imagewidth/2ORtop: 50%和margin-topas放在一起。-imageheight/2

于 2013-03-10T05:10:09.613 回答
1

使用 CSS3 background-size: cover。

这是一个工作示例：http: //jsfiddle.net/HBPRv/。

您可以在此处阅读文档。

于 2013-03-10T05:16:51.423 回答