Проблема с отзывчивым CSS кружком div, содержащим изображение - PullRequest
Новая
       6

Проблема с отзывчивым CSS кружком div, содержащим изображение

0 голосов
/ 06 января 2019

У меня проблемы с созданием 9 отзывчивых кругов CSS в ряд, где каждый круг содержит тег img (не фоновое изображение) внутри них. Размер img должен быть центрирован и изменен в зависимости от размера div родительского круга. Эти 9 кругов отображаются в строке и содержатся внутри контейнера сетки, где каждый круг назначен своей собственной ячейке. Центр этих 9 (число 5) в два раза больше остальных кружков.

Для контейнеров меньшего размера я использую следующий CSS: 

border: blue 1px solid;
border-radius: 50%;
width: 100%;
height: 0%;
padding-top: 100%;
margin:auto;
overflow: hidden;

Это основано на различных уроках, которые я нашел в Интернете, и предложениях, найденных в других сообщениях о переполнении стека.

Тег img имеет следующий CSS: 

width: 100%;
height: 100%;
object-fit: cover;

На основе этого урока здесь: https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

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

Вот скрипка с этими компонентами: https://jsfiddle.net/jth3rb6m/

1 Ответ

0 голосов
/ 06 января 2019

Проблема с не круглыми изображениями связана с тем, что изображение не является квадратным. 

.friend-cont {
  display: grid;
  justify-content: space-around;
  grid-template-columns: calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(20% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px) calc(10% - 5px);
  grid-column-gap: 5px;
  grid-template-rows: auto;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: auto;
}

.friend-pic {
  border: blue 1px solid;
  border-radius: 50%;
  width: 100%;
  height: auto;
  /* height: 0%; */
  /* padding-top: 100%; */
  margin: auto;
  overflow: hidden;
}

.friend-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-pic {
  border: blue 1px solid;
  border-radius: 50%;
  /* height: 0%; */
  /* padding-top: 100%; */
  margin: auto;
  overflow: hidden;
}
<div class="friend-cont">

  <div class="profile-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

  <div class="friend-pic">
    <img class="friend-photo" src="https://i.stack.imgur.com/l60Hf.png">
  </div>

</div>
...