Адаптивные изображения для> 1 изображений с соотношением сторон (выше, чем шире) - PullRequest
Новая
       9

Адаптивные изображения для> 1 изображений с соотношением сторон (выше, чем шире)

0 голосов
/ 05 апреля 2020

Привет,

Как все знают, у нас есть плавное изображение (отзывчивое) в css, которое мы должны использовать: 

img {
   max-width: 100%;
   height: auto;
}

Этот код работает как талисман, когда у нас есть > 1 форматное соотношение (шире, чем 99% изображений).

Теперь у меня есть разметка: 

<div class="circle-bg">
 <img src="pathto/myimage.png" alt="" class="phones">
 </div>`

Это выглядит так

phone

Это изображение внутри div, которое имеет заданную ширину и высоту, например: 

.circle-bg {
height: 1000px;
width: 800px;

Теперь, теоретически, изображение должно заполнить 100% ширину без переполнения контейнера, но на практике я должен установите ширину и высоту также для изображения, например так: 

.phones {
width: 100px;
height: 500px;

Фактически, если я не расшифрую размер, он становится: enter image description here

Как как видите, не очень красиво, и фрагмент css для адаптивного изображения не работает.

Как я могу исправить это поведение?

** Вот скрипка: https://jsfiddle.net/xuwcat4r/

1 Ответ

0 голосов
/ 06 апреля 2020

Изначально вам необходимо position : absolute свойство класса .phones, чтобы иметь возможность перемещать его по желанию в контейнере.

Короче говоря, css должно быть

CSS

.circle-bg {
  width: 740px;
  height: 737px;
  background: blue;
  border-radius: 50%;
}

/* Basic responsive, doesn't work */
img {
  max-width: 500px;
  height: 600px;
  position : absolute;

}

/* positionate images to the center */
.phones {
  position: absolute;
   left : 142px;
   top : 72px;

}

Выше упомянутое CSS работает здесь как https://jsfiddle.net/xu3o9bvd/

...