instagram style изучить список изображений страницы с CSS

Я пытаюсь создать страницу изучения стиля instagram, но у меня есть один вопрос здесь. Я создал это DEMO от codepen.io.instagram style изучить список изображений страницы с CSS

В этом окне вы можете увидеть изображения. Изображения width и height отличается не одинаковыми. Я хочу обрезать эти изображения с помощью CSS. DEMO страница.

Разница между первым и вторым демо

Первый демо:

.exPex { 
    width: 100%; 
}

Second Демо-версия:

.exPex { 
    width: 200%; 
}

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

источник

2016-06-06 Azzo

Я думаю, что лучше установить высоту: 100% также – Mojtaba

Вы можете установить изображения в качестве фоновых изображений и использовать background-size: cover;, чтобы получить эффект, который вы ищете (DEMO). Это имеет недостаток, что ваши пользователи не смогут щелкнуть правой кнопкой мыши или перетащить изображения (чтобы сохранить их и т. Д.), Как они могли бы ожидать.

HTML для примера изображение:

<div class="_jjzlb" style="background-image:url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');"> 
</div>

CSS:

._jjzlb { 
    position: relative; 
    padding-top: 100%; 
    width: 100%; 
    overflow: hidden; 
    margin: 1px; 

    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 

    /* Optional centered background */ 
    background-position: center; 
}

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

HTML для примера изображения с нормальным взаимодействием изображения мыши:

<div class="_jjzlb" style="background-image: url('http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg');"> 
    <img src="http://mihangallery.ir/wp-content/uploads/2015/11/Almost-Home-Wallpapers.jpg" class="exPex"> 
</div>

CSS, чтобы скрыть изображение вверху:

.exPex { 
    position: absolute; 
    display: block; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    opacity:0; 
}

А вот DEMO с изображениями, взаимодействующий с пользователем как вы могли бы ожидать от них.

EDIT: Как указано в @GCyrillus, есть недостатки в использовании фонового изображения, а не сохранение изображений в содержимом страницы. Они могут включать поисковые системы и устройства чтения с экрана, не распознающие изображение.У меня нет исчерпывающего списка недостатков, но в зависимости от вашего приложения, возможно, стоит изучить.

источник

2016-06-06 15:38:53 David

Хороший ответ, я понял, что мне нужно делать. Большое вам спасибо за это. – Azzo

Нет проблем @DevStud - Обратите внимание, что после того, как вы сделали этот комментарий, я исправил ошибку с последним блоком CSS, который заставлял скрытые изображения не покрывать всю высоту квадратов. – David

Да, я видел это раньше, и я тоже исправил это. Иногда люди не думают о простых решениях, подобных мне. :) – Azzo

-1

Возможно, это может показаться очевидным, но вы можете просто установить фиксированную ширину? Попытка изменить width: 100% с помощью width: 400px на .exPex например.

источник

2016-06-06 15:27:40

вы можете использовать преобразование:

.exPex { 
    position: absolute; 
    left: 0; 
    top: 0; 
    min-width:100%; 
    margin: 0; 
    transform: scale(2); 
    transform-origin: 0 40px; 
}

http://codepen.io/gc-nomade/pen/jrbPRy

источник

2016-06-06 15:32:53

Если пропорции изображения неблагоприятны (в этом случае, поскольку он масштабируется до двух раз, «неблагоприятный» означает, что изображение более чем в два раза шире, чем оно высока), и вы хотите заполнить квадрат, это не заполнит высоту квадрата изображением. – David

@ Давид на самом деле, transforl: масштаб (2); размножайте ширину: 200% от собственной демонстрации, не требуя в два раза пробела ---. но он сохраняет изображение в содержимом страницы, когда он находится в фоновом режиме, он просто превращается в дизайн и может быть невидимым по многим причинам и никогда не будет доступен для чтения с экрана и поисковых систем. ;) Мне посоветовать задавать контент в css или фоновом режиме, не объясняя, что это значит, не так мудро. Просто мое мнение;) –

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

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

источник

2016-06-06 15:34:15 Asim

instagram style изучить список изображений страницы с CSS

ответ

Смежные вопросы