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

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

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

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

我发现这个解决方案使用了“最大宽度”或“最大高度”，但它只适用于一个选项（更大的宽度或更大的高度）：

使用JavaScript：

工作演示：

（适用于横向、纵向和方形尺寸！）

---

要集中在div中，根据您的需要，将

左：50%

和

左边距

设置为

-imagewidth/2

或

顶部：50%

和

顶部距

设置为

-imageheight/2

。

使用CSS3

背景尺寸：封面

下面是一个工作示例：

---

您可以阅读文档。

这是我的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;
}

---

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

为什么服务器会跳闸？这在客户端是可行的，因为图像不需要保存为拇指！；）我同意，但出于我个人的要求，有必要解决其他问题，如需要查找文件是否存在以及在大量用户中循环。因为他没有提到他是通过哪种方式获得图像的，所以我想我会把它扔到这里，如果没有其他东西可以帮助他的话。事实上，我的应用程序是Asp.Net的，所以你的PHP代码对我帮助不大。无论如何，在div的背景图像上使用图像的技巧效果很好。无论如何，非常感谢你！这一切都很好，只是想尽我的一份力量帮助这么多人谢谢！！这真的奏效了。但我认为，与div的背景图像的技巧更容易。无论如何，非常感谢你！胡安，你说得对。只有CSS3的新版本，对吗？谢谢你的提示@JuanGonzales是真的，但它得到了很好的支持：。它看起来像是唯一的

//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)];
}

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");