Изображения не с фиксированной высотой и шириной реагируют на все разрешения - PullRequest
Новая
       45

Изображения не с фиксированной высотой и шириной реагируют на все разрешения

0 голосов
/ 17 ноября 2018

Я создал страницу профиля, которая использует много изображений разных размеров.Для того, чтобы сделать его отзывчивым, я использовал твиттер bootstrap3.Для изображения я использовал img-circle m-t-xs img-responsive, но неподвижные изображения не отображаются с фиксированной шириной и высотой, как показано ниже.

enter image description here

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

.img-responsive {
     height: 100px;
     width: 100px;
}

Кроме того, фактический вид выглядел хорошо, как показано ниже, когда я масштабируюв нем показано так много пробелов, как показано ниже

Фактический вид

enter image description here

Увеличить Просмотр

enter image description here

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

Моя полная веб-страница доступна в нижеприведенном плунжере (я не добавил фиксированную высоту или ширину для класса .img-responsive, можете проверить, добавив это)

https://plnkr.co/edit/qIDGjikGDetKI4LFAtmK?p=preview

1 Ответ

0 голосов
/ 17 ноября 2018

может быть что-то вроде этого: 

<div class="col-lg-4">
  <div class="contact-box row">
    <a href="profile.html">
      <div class="col-xs-4 col-sm-3 col-md-2 col-lg-4 text-center row">
        <div style="width: 100%; padding-top: 100%; overflow: hidden; position: relative; height: 0;">
          <div style="border-radius: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-image: url('https://cdn2.thedogapi.com/images/SkatQTaEQ.gif'); background-position: center; background-repeat: no-repeat;">
          </div>
        </div>
        <div class="m-t-xs font-bold">House Name</div>
      </div>
        <div class="col-xs-8">
          <h3><strong>Tinkku Baby</strong></h3>
          <p><i class="fa fa-map-marker"></i> City Name</p>
          <address>
            <strong>Twitter, Inc.</strong><br>
              795 Folsom Ave, Suite 600<br>
              San Francisco, CA 94107<br>
              <abbr title="Phone">P:</abbr> (123) 456-7890
          </address>
        </div>
        <div class="clearfix"></div>
      </a>
    </div>
  </div>
...