Пропорциональное масштабирование картинки в DIV c помощью Html и CSS

Иногда в задачах требуется уместить картинку в DIV с сохранением пропорций.

Решение:

<!DOCTYPE html>
<html>
    <head>
        <title>Маштабирование картинки в DIV с сохранением пропорций</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
   
.photoMashTab {
    margin-top: 20px;
    width: 205px;
    height: 120px;
    background: url(https://design4uru.info/demo/569/perishko.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

   
    </style>
    </head>
    <body>
        
       <div class="photoMashTab"></div> 
        
    </body>
</html>

 

Читайте также: