在div内调整和对齐图片大小

Question

在div内调整和对齐图片大小

htmlcssimagedynamic-resizing

3

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

我需要在50x50像素的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;
}

- Leandro Faria

3个回答

1

使用CSS3 background-size: cover。

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

你可以在这里阅读文档。

- Jonathan Potter

嗯，Juan，你说得对。只有使用CSS3的新版本，对吧？感谢指点！ - Leandro Faria

@JuanGonzales 是的，但它得到了很好的支持：http://caniuse.com/#feat=background-img-opts。看起来只有IE <= 8不支持它。 - Jonathan Potter

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

- Rutwick Gangurde

谢谢！真的起作用了。但是我认为使用 div 的背景图像的技巧更容易。无论如何非常感谢你！ - Leandro Faria

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Juan Gonzales · Accepted Answer

这是我用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");

我希望这至少能为您指明正确的方向。