Я хочу сделать макет для карточки уведомлений, например:

Mockup

Которая подчиняется следующим правилам компоновки:

  • Высота уведомления зависит только от текста, а не от изображения.
  • Высота изображения соответствует высоте текста (поэтому, если бы вы удалили субтитры, уведомление уменьшилось бы, и изображение тоже)
  • Ширина изображения подчиняется его высоте, чтобы сохранить естественное соотношение сторон изображения.

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

css
1
Andrew 4 Окт 2014 в 22:40

2 ответа

Лучший ответ

Мне удалось обойти масштабированное фоновое изображение на моем сайте, используя свойство background-size: cover в сочетании с центрированным фиксированным фоновым изображением на содержащем элементе

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

Вот jsfiddle: http://jsfiddle.net/20v1mgr0/1/

Разметка будет примерно такой:

<div class="hero-unit table">
    <div class="table-row">
        <div class="width-one table-cell scaled-image"></div>
        <div class="width-two table-cell text-area">
            <h2>Text goes in here</h2>
            <p>Text goes in here</p>
        </div>
    </div>
</div>

Стиль будет примерно таким:

.table{
    position: relative;
    display:table;
}
.table-row{
    position: relative;
    display:table-row;
}
.table-cell{
    position: relative;
    display:table-cell;
}
.hero-unit{
    width:600px;
    padding:20px;
    background:yellow;
    margin-bottom:20px;
}
.scaled-image { 
    background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border:1px solid green;
}
.text-area{
    background:blue;
}
.width-one {
    width:20%;   
}
.width-two {
    width:80%;
    padding:0 20px;
}
3
Jonathan 4 Окт 2014 в 19:50

Я предполагаю, что если ширина изображения увеличивается, текст должен сдвигаться вправо, чтобы не перекрывать его, верно?

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

Но тогда для текста будет еще меньше места и так далее.

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

3
Oriol 4 Окт 2014 в 18:58