Я делаю список элементов, но у него есть некоторые проблемы:
Это образ того, что я ожидаю:
И что у меня есть: http://codepen.io/caio/pen/ygkfm/
Как вы можете видеть, я не могу установить одинаковое масштабирование на "образ" div, когда у него есть значок. Есть ли решение для моей проблемы?
Я предполагаю, что ваши изображения (кроме значков) имеют одинаковое соотношение сторон, как в вашем примере.
В этом случае вы можете использовать дно дополнения, чтобы сохранить высоту контейнера изображения. Поскольку 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;
}
Легко
добавить 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);
Это не совсем то, что вы имели в виду, но это очень отзывчивый дизайн, который я ожидаю, что вам нужно: 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.
Я думаю, что вы идете по этому неправильно, когда все основано на процентах ширины, нет способа узнать высоту, если вы не используете JS, поэтому вам нужно изменить ширину на что-то более подходящее для достижения своей цели.
изменение вашего CSS на:
.icon {
margin: 0 auto;
padding: 5% 0;
width: 40%;
}
и он будет больше похож на вас. Я обновил ваш CodePen
Возможно, вы могли бы попробовать эту библиотеку jQuery http://brm.io/jquery-match-height/
Чтобы использовать его, вы назначаете атрибуты данных элементам, высоты которых вы хотите сопоставить, а затем вычисляли высоту каждого элемента, который они должны сделать, если они все одинаковы. Он принимает для учета отступов, полей, границ и размеров полей.
В основном, я добавил максимальную высоту и минимальную высоту того же значения в .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
Вы можете использовать дополнительный элемент и 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 требуется:
font-size:0;<div><img src=".. не должен быть отступом<div><!-- code indented --><img src="... чтобы избежать дополнительных white-space и разбить 2 строки, когда img заполнен width.
Я сделал ссылку в демоверсии другой версии, где изображение может быть больше, чем требуемое начальное пространство, не нарушая макет (основываясь на идее о том, что элементы остаются в потоке, не задействовано позиционирование absolute): EXTRA
Я делаю это то, чем вы не являетесь.
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;
}
}
}
Я бы предпочел пойти и использовать те служебные классы, которые я нашел, используя довольно много с тех пор, как я их нашел, в основном внедряя их на каждый написанный мной 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>