масштабирование изображения с тенью в CSS - PullRequest
Новая
       13

масштабирование изображения с тенью в CSS

0 голосов
/ 22 октября 2019

У меня были проблемы с масштабированием изображения с тенью. На экранах рабочего стола картинка в порядке, но когда она масштабируется до уровня мобильного устройства, она становится слишком большой и пересекает другие деления.

Может кто-нибудь помочь с масштабированием для мобильных устройств? 

.img {
  width: 330px;
  height: 300px;
  border: 2px solid #fff;
  background: url(https://picsum.photos/330/300) no-repeat;
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 10px 5px #ccc;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}
<div class="img"></div>

Является ли это даже лучшим способом поместить этот тип изображения, просто используя в основном CSS?

1 Ответ

0 голосов
/ 22 октября 2019

Это то, что вам нужно?

Измените размер окна, чтобы увидеть его в действии. 

#imageContainer{
   position: relative;
    
   height: auto;
   width: 20vw;
 }

.img {
  height: 150px;
  width: 100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-image: url(https://picsum.photos/330/300);
  background-repeat: no-repeat;
  background-position: center center;
  
  border: 2px solid #fff;
  -moz-box-shadow: 10px 10px 5px #ccc;
  -webkit-box-shadow: 10px 10px 5px #ccc;
  box-shadow: 10px 10px 5px #ccc;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}
<div id="imageContainer">
 <div class="img"></div>
</div>
...