Question

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

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

enter image description here

当图像宽度较大以及高度较大时，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;
}

Answer 1

这是我的功能（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");

我希望这至少会指出你正确的方向

Answer 2

使用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%和margin-left设置为-imagewidth/2或top: 50%和margin-top设为-imageheight/2，具体取决于您的身份需要。

Answer 3

使用CSS3 background-size: cover。

以下是一个有效的例子：http://jsfiddle.net/HBPRv/。

您可以阅读文档here。

调整div中的图片大小并对齐

3 个答案: