Ответы пользователя по тегу CSS
  • При вставке изображения через background очень сильно теряется качество, появляется зернистость. пиксельные края элементов и тд. Как решить проблему?

    houseprog
    @houseprog
    Веб-разработчик
    Перед вставкой изображения в CSS background-image, предварительно следует подготовить его - масштабировать до нужного размера средствами PHP или JS. Например, на хостинг можно положить скрипт, resize-image.php а путь к изображению указывать так: resize-image.php?pathimage=images/photo1.jpg&width=200&height=200

    В результате изображение будет вставляться в background-image уже нужного размера и браузеру не придется его масштабировать самостоятельно(с чем он справляется как вы верно заметили не очень).

    Скрипт на PHP может выглядеть так:

    <?php
    
    function img_resize($src, $dest, $width, $height, $rgb = 0xFFFFFF, $quality = 100) {  
    	    if (!file_exists($src)) {  
    	        return false;  
    	    }  
    	    $size = getimagesize($src);  
    
    	    if ($size === false) {  
    	        return false;  
    	    }  
    
    	    $format = strtolower(substr($size['mime'], strpos($size['mime'], '/') + 1));  
    	    $icfunc = 'imagecreatefrom'.$format;  
    	    if (!function_exists($icfunc)) {  
    	        return false;  
    	    }  
    
    	    if($width==0)if($size[0]<=800)$width=$size[0];else $width=800;
    	    if($size[0]<$width)$width=$size[0];  
    	    if($size[1]<$height)$height=$size[1];  
    
      
    	    $x_ratio = $width  / $size[0];  
    	    $y_ratio = $height / $size[1];  
      
    	    if ($height == 0) {  
      
    	        $y_ratio = $x_ratio;  
    	        $height  = $y_ratio * $size[1];  
      
    	    } elseif ($width == 0) {  
      
    	        $x_ratio = $y_ratio;  
    	        $width   = $x_ratio * $size[0];  
      
    	    }  
      
    	    $ratio       = min($x_ratio, $y_ratio);  
    	    $use_x_ratio = ($x_ratio == $ratio);  
      
    	    $new_width   = $use_x_ratio  ? $width  : floor($size[0] * $ratio);  
    	    $new_height  = !$use_x_ratio ? $height : floor($size[1] * $ratio);  
    	    $new_left    = $use_x_ratio  ? 0 : floor(($width - $new_width)   / 2);  
    	    $new_top     = !$use_x_ratio ? 0 : floor(($height - $new_height) / 2);  
      
    	    $isrc  = $icfunc($src);  
    
    	    $idest = imagecreatetruecolor($width, $height);  
    
    	    imagefill($idest, 0, 0, $rgb);  
    
    	    imagecopyresampled($idest, $isrc, $new_left, $new_top, 0, 0, $new_width, $new_height, $size[0], $size[1]);  
    
    	    header("Content-type: image/jpeg");
    	    imagejpeg($idest);
      
    	    imagedestroy($isrc);  
    	    imagedestroy($idest);  
     
    }  
    
    header("Content-type: image/jpeg");
    header("Cache-control: public");
    header("Expires: " . gmdate("D, d M Y H:i:s", date("U")+(86400*365.25)) . " GMT");
    
    img_resize($_GET['pathimage'], $dest, $_GET['width'], $_GET['height'], $rgb = 0xFFFFFF, $quality = 70);
    Ответ написан