Масштабирование div как изображение

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

  • Адаптивный;
  • "title" может иметь более одной строки;
  • Иногда мне нужно показывать значок с цветом в фоновом режиме вместо полного изображения.

Это образ того, что я ожидаю: Final result expected

И что у меня есть: http://codepen.io/caio/pen/ygkfm/ What I have

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

Ответы

Ответ 1

Я предполагаю, что ваши изображения (кроме значков) имеют одинаковое соотношение сторон, как в вашем примере.

В этом случае вы можете использовать дно дополнения, чтобы сохранить высоту контейнера изображения. Поскольку padding-bottom вычисляется в соответствии с шириной контейнера, он будет сохранять пропорции независимо от содержимого (вам нужно будет поместить содержимое с помощью position:absolute;, чтобы он не менял размеры контейнера).

Вот демонстрация. Показываем, что вы можете сделать. Извините, я не в codePen

Я также добавил другой контейнер, чтобы центрировать значки горизонтально.

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.items {
    margin: 50px auto 0;
    width: 90%;
    *zoom: 1;
}
.items:before, .items:after {
    content:" ";
    display: table;
}
.items:after {
    clear: both;
}
.items .item {
    border: 1px solid #ddd;
    float: left;
    width: 32%;
}
.items .item:nth-child(3n+2) {
    margin: 0 2%;
}
.items .item .image {
    background: #eee;
    padding-bottom:50%;
    position:relative;
}
.items .item .image .img_in{
    position:absolute;
    width:100%;
    height:100%;
    text-align:center;
}
.items .item .image img {
    display: block;
    width: 100%;
    height:100%;
}
.items .item .image img.icon {
    height: 80%;
    margin:0 auto;
    position: relative;
    top: 10%;
    width: auto;
}
.items .item .title {
    margin: 0;
    padding: 20px;
}

Ответ 2

Легко

добавить follwing к .items .item .image

когда у вас есть "нормальная" ширина и высота 200 и 100 пикселей, тогда 50% составляет 50% ширины (200 * 50% = 100)

{
    height: 0;
    padding-bottom: 50%;
}

http://codepen.io/HerrSerker/pen/HhjKo?editors=110

изменить

Вы можете использовать функцию SCSS percentage:
padding-bottom: percentage(100px / 200px);

Ответ 3

Это не совсем то, что вы имели в виду, но это очень отзывчивый дизайн, который я ожидаю, что вам нужно: http://codepen.io/anon/pen/DwudI

Здесь суть: вы, вероятно, хотите сохранить соотношение сторон каждого основного контейнера. Затем изображение масштабируется как минимум на 80% от высоты и не более 100% как по ширине, так и по высоте. Способ создания пропорции в div - это использование этого увлекательного трюка padding-top. Когда вы изменяете размер экрана, изменяется ширина div, что приводит к изменению высоты (соотношение сторон). Поэтому, если вы измените размер меньше, а затем div станет меньше размера изображения, из-за чего 200x100 будет заполнять весь div.

Итак, если вы хотите, чтобы изображение заполнило div, оно должно быть (A) больше, чем div и (B), с тем же соотношением сторон, что и div.

Вы упомянули название может быть несколько строк: прямо сейчас новые строки идут ниже. Если вы хотите, чтобы текст "плавал вверх", это было бы не слишком сложно. Просто используйте position:absolute; bottom:0px в заголовке и убедитесь, что .item имеет position:relative.

Ответ 4

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

изменение вашего CSS на:

.icon {
    margin: 0 auto;
    padding: 5% 0;
    width: 40%;
}

и он будет больше похож на вас. Я обновил ваш CodePen

Ответ 5

Возможно, вы могли бы попробовать эту библиотеку jQuery http://brm.io/jquery-match-height/

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

Ответ 6

В основном, я добавил максимальную высоту и минимальную высоту того же значения в .items .item .image img:

.items .item .image img {
    display: block;
    width: 100%;
    max-height:23%;
    min-height:23%;
}

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

HTML

<div class="items">
    <a href="#" class="item">
        <div class="image">
            <img src="http://placehold.it/200x100" />
        </div>
        <h4 class="title">Hi. I'm a title.</h4>
    </a>
    <a href="#" class="item">
        <div class="image">
            <img src="http://placehold.it/80x80" class="icon" />
        </div>
        <h4 class="title">Hi. I'm a title.</h4>
    </a>
    <a href="#" class="item">
        <div class="image">
            <img src="http://placehold.it/200x100" />
        </div>
        <h4 class="title">Hi. I'm a title.</h4>
    </a>
</div>

CSS

* {
    @include box-sizing(border-box);
}
.items {
    margin: 50px auto 0;
    width: 90%;
    @include clearfix;
}
.item {
    border: 1px solid #ddd;
    float: left;
    width: 30%;
}
.items .item .image {
    background: #eee;
}
.items .item .image img {
    display: block;
    width: 100%;
    max-height:23%;
    min-height:23%;
}
.items .item .title {
    margin: 0;
    padding: 20px;
}
.icon {
    height: 80%;
    margin: 0 auto;
    position: relative;
    top: 10%;
    width: auto;
}
.items .item:nth-child(3n+2) {
    margin: 0 2%;
}

И вот FIDDLE

Ответ 7

Вы можете использовать дополнительный элемент и vertical-padding, чтобы заставить ваш div сохранить то же соотношение, что у него есть изображение 2: 1 или нет.

DEMO и базовый css:

.image:before {
  content:'';
  display:inline-block;
  vertical-align:middle;
  padding-top:50%;/* equals 50% of width of parent */
  width:0;
  box-shadow:0 0 0 5px red;/* let see where it stands for demo purpose */
}

Чтобы это работало в кодексе:

img должен вернуться к своему стандарту display (inline-block), поэтому просто удалите display:block; и вернитесь по вертикали в middle к псевдоэлементу, пробел под img, который появляется, когда на baseline, больше не будет здесь.

.image требуется:

  • В CSS font-size:0;
  • В HTML код <div><img src=".. не должен быть отступом
  • В HTML-пространстве должно быть указано <div><!-- code indented --><img src="...

чтобы избежать дополнительных white-space и разбить 2 строки, когда img заполнен width.

Я сделал ссылку в демоверсии другой версии, где изображение может быть больше, чем требуемое начальное пространство, не нарушая макет (основываясь на идее о том, что элементы остаются в потоке, не задействовано позиционирование absolute): EXTRA

Ответ 8

Я делаю это то, чем вы не являетесь.

Демо

HTML  

  <a href="#" class="item">
    <div class="image">
      <div><img src="http://placehold.it/200x100"></div>
    </div>
    <h4 class="title">Hi. I'm a title.</h4>
  </a>

  <a href="#" class="item">
    <div class="image">
      <div><img src="http://placehold.it/80x80" class="icon"></div>
    </div>
    <h4 class="title">Hi. I'm a title.</h4>
  </a>

  <a href="#" class="item">
    <div class="image">
      <div><img src="http://placehold.it/200x100"></div>
    </div>
    <h4 class="title">Hi. I'm a title.</h4>
  </a>
</div>

SCSS

* { @include box-sizing(border-box); }

.items {
  margin: 50px auto 0;
  width: 90%;
  @include clearfix;

  .item {
    border: 1px solid #ddd;
    float: left;
    width: 32%;
    &:nth-child(3n+2) { margin: 0 2%; }

    .image {
      background: #eee;
      min-height:100px;
      max-height:100px;
      display:table;
      width:100%;

      &> div {

      display:table-cell;
      text-align:center;
      vertical-align:middle;
      }

      img {
        max-width:100%;
        height:100%;
        margin:0 auto;
        &.icon {
          height: 80%;
          margin: 0 auto;
          position: relative;
          top: 10%;
          width: auto;
        }
      }
    }

    .title {
      margin: 0;
      padding: 20px;
    }
  }
}

Ответ 9

Я бы предпочел пойти и использовать те служебные классы, которые я нашел, используя довольно много с тех пор, как я их нашел, в основном внедряя их на каждый написанный мной CSS. Чистый, легко читаемый и удобный для встраивания в HTML.

Этот небольшой набор классов позволяет вам иметь пропорциональные размеры ширины/высоты на элементах. Здесь демо http://siebennull.com/equal_width_height.html

Вот статья, объясняющая это: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Кредит, очевидно, идет к тому, кто нашел этот трюк:)

CSS

.box{
    position: relative;
    width: 50%;     /* desired width */
}
.box:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
/* Other ratios */
.ratio2_1:before{
    padding-top: 50%;
}
.ratio1_2:before{
    padding-top: 200%;
}
.ratio4_3:before{
    padding-top: 75%;
}
.ratio16_9:before{
    padding-top: 56.25%;
}

HTML

<div class='box'> 
    <div class='content'>Aspect ratio of 1:1</div> 
</div>
<div class='box ratio16_9'> 
    <div class='content'>Aspect ratio of 16:9</div> 
</div>