it-swarm.com.ru

как придать изображению динамическую ширину и высоту при использовании адаптивной сетки сетки

Я использую систему сетки начальной загрузки и вот мой сайт . Проблема в том, что при начальной загрузке карта предмета выглядит довольно дрянно, как это:

enter image description here

и вот как это выглядит после загрузки:

enter image description here

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

10
adit

Вы можете рассчитать коэффициент изображения, если он известен, а затем установить его для соотношения

Проверьте JS Fiddle:

http://jsfiddle.net/J8AYY/7/

<div class="img-container">
    <img src="">
</div>

.img-container {
    position:relative;
    padding-top:66.59%;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
}

Так что если ваше изображение имеет ширину 2197 пикселей и высоту 1463 пикселей

затем установите для контейнера, содержащего изображение, верхний отступ 1463/2197 * 100% затем установите для своего изображения абсолютное положение теперь ваше изображение может быть отзывчивым и не беспокоиться о разрушающемся контейнере

14
Chihung Yu

Вам нужно поместить миниатюры в контейнер динамического размера, высота которого пропорциональна его ширине. Вы можете сделать это, сопоставив width и padding-bottom в контейнере, а также некоторые другие особенности, как в Bootply и примере ниже:

Bootply

Пример:

CSS: 

.thumbnail_container {
     position: relative;
     width: 100%;
     padding-bottom: 100%; <!-- matching this to above makes it square -->
     float:left;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
}
.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

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

HTML:

<div class="container-fluid"> <!-- this makes your images scale constantly, between breakpoints as welll. removing -fluid makes then jump in size at breakpoints -->
  <div class="row">

  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/400x600">
      </div>
    </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="http://placehold.it/600x600">
      </div>
    </div>  
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/600x400">
      </div>
    </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="no-photo" /> <!-- No Photo, but it still scales -->
      </div>
    </div>  
</div>

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

Примечание: сопоставив padding-bottom с width, вы получите квадратный контейнер миниатюр, но вы можете сделать его в любой пропорции, настроив padding-bottom %.

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

3
Shawn Taylor

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

.item-card img {
  min-height: 100px;
}

// Small screen
@media (min-width: 768px) {
  .item-card img {
    min-height: 150px;
  }
}

// Medium screen
@media (min-width: 992px) {
  .item-card img {
    min-height: 200px;
  }
}

// Large screen
@media (min-width: 1200px) {
  .item-card img {
    min-height: 250px;
  }
}
1
theJoeBiz

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

.image-box img {
    width: 100%; 
}

Если мы укажем только ширину изображения, высота будет рассчитана автоматически. Это сохранит пропорции изображения. Ширина 100% будет точно соответствовать контейнеру изображения. Этот код может не работать для фонового изображения.

1
kundan Karn

Ваша проблема в том, что во время загрузки img имеет высоту = 0 и ширину = 100%. Итак, у вас есть пустое изображение при загрузке страницы.

Вы можете рассмотреть возможность использования Image Preloader:

Если вы хотите, чтобы все изображения имели одинаковую высоту, используйте плагин Fake Crop jQuery. На самом деле, он не обрезает файл изображения, но изображение получает «обрезанный» эффект, используя свойства CSS Positioning.

Также вы можете назначить min-height для контейнера:

 .product-view .img-responsive {min-height:352px; background:#fff;}

Вы также можете посмотреть в Lazy Загрузка:

0
Wissam El-Kik
   use bootstrap or @media queries

  /* Small devices (tablets, 768px and up) */
  @media (min-width: @screen-sm-min) { ... }

 /* Medium devices (desktops, 992px and up) */
  @media (min-width: @screen-md-min) { ... }

   /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }

      We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

    @media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }

     http://getbootstrap.com/css/#grid 
0
Kisspa