How to make image stretching with scaling?

Question

Nginx

<div class="gal-img-wrap-wrap">
                    <div class="gal-img-wrap">
                        <img  src="/<?php echo  $elem->subid.'/'.$elem->photo?>">
                    </div>
                </div>

.gal-img-wrap-wrap{
         overflow: hidden;
         background-size: cover;
         height: 300px;
         width: 300px;
     }
.gal-img-wrap{
        width: 150%;
        height: 150%;
    }
       .gal-img-wrap-wrap .gal-img-wrap img{
           width: 100%;
            height: 100%;
        }

Something like this, but with lossless scaling. That is, the required size is 300x300, let the image be stretched and scaled like a magnifying glass while still maintaining proportions. Whether it's less or more. Even if 1 by 300, the image was still stretched, even to the squares

Answer 1

location /old-page {
  return 301 $schema://$host/new-page;
}

And yes, after each edit, you need to restart nginx

Answer 2

1. The rewrite directive can be used in the server block, it is not necessary (and not even recommended) to write a separate location block for each rewrite rule. See documentation .
2. If there are more than a couple of redirects, for convenience, connect a separate file in the server block, you can put it anywhere (I keep it in the project itself, this allows you to track all changes in git):
3. And already in this file, write redirects one by one another, one per line:

rewrite ^/page/qwe/?$ $schema://$server_name/page-qwe/ permanent;
rewrite ^/qwe/?$ $schema://$server_name/qwe-qwe/ permanent;

4. After each change in the config (including the connected config with redirects), you need to ask Nginx to reload the configs (not necessary, and you don’t even need to reload Nginx itself):
sudo service nginx reload

Answer 3

HTML

<span class="pic"><img src="/i/h.png"></span>
<span class="pic"><img src="/i/v.png"></span>

.pic {
  display: inline-block;
  overflow: hidden;
  width: 300px;
  height: 300px;
}
.pic img {
  min-width: 100%;
  min-height: 100%;
  /*Если требуется центрировать фотографии*/
  margin: 50% -50% -50% 50%;
  transform: translate(-50%, -50%);
}

If you plan to use IE 8 and below, remove the last 2 lines in CSS with centering.