Блог

Главная - Вопросы по программированию - Как заполнить содержимое div изображением

Как заполнить содержимое div изображением

#css

#css

Вопрос:

Я создаю социальный сайт, и люди могут загружать изображения. Когда они загружают это изображение, оно находится внутри div. Как мне заполнить весь div, чтобы я не видел пробелов по бокам?

Вот как это выглядит сейчас:

Первый пример

Второй пример

Мой код:

 .postedImageDiv {
max-width: 500px;
overflow: hidden;
max-height: 400px;
border-radius: 10px;
border: 1px solid gray;
background: #fff;
margin-bottom: 1em;
}

.profilePostedImage img {

max-height: 450px;
max-width: 450px;
display: block;
margin: 5px auto;
}

.postedImage img {

align-self: center;
object-fit: contain;
max-height: 600px;
max-width: 600px;
display: block;
margin: 5px auto;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

Комментарии:

1. Что, если вы попробуете object-fit: cover вместо object-fit: contain ?

2. @agrm тоже не помогает

3. Я вижу, что теперь вы пытаетесь удалить пробел. Удалите поле, которое вы добавили к .postedImage img или .profilePostedImage img (в зависимости от того, что содержит изображение)

4. @agrm Это тоже не помогло

5. Попробуйте установить для дочернего div значение width height равным 100%, поскольку вы указываете максимальную ширину и высоту для его родительского элемента

Ответ №1:

Вы могли бы попробовать эти:

     max-width: 100%;
    max-height: 100%;
    display: block;
  

 .outside {
  max-width: 500px;
  overflow: hidden;
  max-height: 400px;
  border-radius: 10px;
  border: 1px solid gray;
  background: #fff;
  margin-bottom: 1em;
}
.img-inside{
  width: 100%;
  height: 100%;
  display: block;
}  
 <!-- vertical image example -->
<div class="outside">
  <img class="img-inside" src="https://i.guim.co.uk/img/media/86c3481516dce247943ac2978b4f48d16a3ac265/0_170_5120_3074/master/5120.jpg?width=1200amp;height=1200amp;quality=85amp;auto=formatamp;fit=cropamp;s=637dc5731d52754675ef36344a6af3c8">
</div>
<!-- landscape image example -->
<div class="outside">
  <img class="img-inside" src="https://www.straight.com/files/v3/styles/gs_standard/public/images/15/03/shutterstock_grizzlybear_0.jpg?itok=vz6hpl50">
</div>

Комментарии:

1. Для какого класса?

2. класс, который настраивает размер и свойства изображения. только с вашим css я не могу определить, к какому классу принадлежит ваше изображение

3. Это не помогло

4. Я не уверен, но это может помочь: w3schools.com/css/css3_object-fit.asp