<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
$widthPreview = 300;
$heightPreview = 200;
$widthPreviewBig = 300*2;
$heightPreviewBig = 200*2;
foreach($arResult['ITEMS'] as $i => $arItem) {

        $file = CFile::ResizeImageGet($arItem['FIELDS']["DETAIL_PICTURE"]['ID'], array('width' => $widthPreviewBig, 'height' => $heightPreviewBig), BX_RESIZE_IMAGE_EXACT, true);
        $arResult['ITEMS'][$i]["FIELDS"]["DETAIL_PICTURE"]["SRC"] = $file["src"];
        $arResult['ITEMS'][$i]["FIELDS"]["DETAIL_PICTURE"]["WIDTH"] = $file["width"];
        $arResult['ITEMS'][$i]["FIELDS"]["DETAIL_PICTURE"]["HEIGHT"] = $file["height"];

        $file = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"]['ID'], array('width' => $widthPreview, 'height' => $heightPreview), BX_RESIZE_IMAGE_EXACT, true);
        $arResult['ITEMS'][$i]["PREVIEW_PICTURE"]["SRC"] = $file["src"];
        $arResult['ITEMS'][$i]["PREVIEW_PICTURE"]["WIDTH"] = $file["width"];
        $arResult['ITEMS'][$i]["PREVIEW_PICTURE"]["HEIGHT"] = $file["height"];
}

$widthPreview = 200;
$heightPreview = 200;

if ($arResult["DETAIL_PICTURE"]) {
    $file = CFile::ResizeImageGet($arResult["DETAIL_PICTURE"], array('width'=> $widthPreview, 'height'=> $heightPreview), BX_RESIZE_IMAGE_EXACT, true);
    $arResult["PREVIEW_PICTURE"]["SRC"] = $file["src"];
    $arResult["PREVIEW_PICTURE"]["WIDTH"] = $file["width"];
    $arResult["PREVIEW_PICTURE"]["HEIGHT"] = $file["height"];
} elseif($arResult["PREVIEW_PICTURE"]) {
    $file = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], array('width'=> $widthPreview, 'height'=> $heightPreview), BX_RESIZE_IMAGE_EXACT, true);
    $arResult["PREVIEW_PICTURE"]["SRC"] = $file["src"];
    $arResult["PREVIEW_PICTURE"]["WIDTH"] = $file["width"];
    $arResult["PREVIEW_PICTURE"]["HEIGHT"] = $file["height"];
}

function resi($src,$w,$h)
{
    $im_array = explode('/', $src);
    $folder = "/" . $im_array[1] . "/" . $im_array[2] . "/";
    $file = end($im_array);
    $root_path = "/home/d/dlmlru/shop_beta/public_html";

    if(!is_file( $root_path . "/images/products/" . 'N_'. $file)) {
        $inFile = $root_path . $src;
        $outFile = $folder . 'N_' . $file;
        $image = new Imagick($inFile);
        $image->thumbnailImage($w, $h);
        $image->writeImage($root_path . $outFile);
        return $folder . 'N_' . $file;
    }else{
        return $folder . 'N_' . $file;
    }
}


# example <img src="<?echo resi('/images/products/DSC08794_КМГ613_1600.jpg', 200, 133);?>" width="200"/>

$file = CFile::ResizeImageGet($uInfo['PERSONAL_PHOTO'], array('width'=>150, 'height'=>150), BX_RESIZE_IMAGE_PROPORTIONAL, true);

<img src="http://bit.ly/2heoc2H" alt="Simon's cat" width="200" height="200">

img {
  object-fit: cover; // magic goes here
}