Подтвердить что ты не робот

Создание всех фотографий с помощью css

Я пытаюсь сделать серию фотографий на квадратные фотографии. Они могут быть прямоугольными по горизонтали (то есть 600x400) или вертикально (400x600), но я хочу, чтобы они были 175x175 в любом случае. Я думал, что максимальная высота или максимальная ширина меньше, и не допускать переполнения за пределы 175 пикселей на большей стороне... однако у меня проблемы с ним.

Возможно ли это с помощью css?

Ниже моя попытка, но она дает прямоугольники еще:

<div style="min-height:175px; overflow:hidden; max-height:175px;">
<img style="min-width:175px; overflow:hidden; max-height:175px;" src="/photo.png">
</div>

Ответ 1

Я настоятельно рекомендую использовать плагин NailThumb jquery для тех, кто хочет это сделать. Это позволяет создавать квадратные эскизы без искажений. http://www.garralab.com/nailthumb.php

Ответ 2

Вы можете установить ширину/высоту родительского div, а затем установить дочерний тег img на ширину: 100%; высота: авто;

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

Вы также можете установить изображение в качестве фонового изображения на div Затем, если вы можете использовать css3, вы можете использовать свойство background-size. Его атрибуты: содержать, покрывать или определенную высоту (50%, 50%) (175 пикселей, 175 пикселей) Вы также можете попытаться центрировать изображение с фоном

<div style="background-image:url(some.png); background-size: cover; background-position: 50%">

Ответ 3

Хорошо, я понял это.

Не знаю, слишком ли поздно или что, но я придумал способ 100% чистого CSS создания квадратных миниатюр. Это то, что я пытался найти решение на какое-то время и не повезло. С некоторыми экспериментами у меня это работает. Основными двумя атрибутами для использования являются OVERFLOW: HIDDEN и WIDTH/HEIGHT: AUTO.

Хорошо, что делать:

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

img1.jpg(портрет) и img2.jpg(пейзаж)

Для HTML это будет выглядеть так:

<a class="portrait" href="yoursite/yourimages/img1.jpg"><img src="yoursite/yourimages/img1.jpg /></a>
<a class="landscape" href="yoursite/yourimages/img2.jpg"><img src="yoursite/yourimages/img2.jpg /></a>

Итак, на данный момент, так как пока не существует css, приведенный выше код предоставит вам полноразмерное изображение в виде миниатюры, которая будет ссылаться на одно и то же полноразмерное изображение. Правильно, так вот css для портрета и пейзажа. Для каждого есть два объявления (ссылка и изображение ссылки):

.landscape {
        float:left;
        width:175px;     
        height:175px;    
        overflow:hidden;    
    }

.landscape  img{
        width:auto;
        height: 175px;   
    }

.portrait {
        float:left;
        width:175px;
        height:175px;
        overflow:hidden;    
    }

.portrait img {
        width:175px;    <-- notice these
        height: auto;   <-- have switched
    }

Наиболее важными являются ширина и высота и переполнение: скрытые. Поплавок слева не нужен для этого.

В объявлении пейзажной миниатюры (.landscape) ограничивающая рамка установлена на 175 x 175, а переполнение установлено в скрытое. Это означает, что любая визуальная информация, большая, чем площадь, содержащая 175 пикселей, будет скрыта от просмотра.

Для объявления ландшафтного изображения (.landscape img) высота фиксируется на 175 пикселей, которая изменяет размер оригинальной высоты, а ширина устанавливается на авто, которая изменяет размер первоначальной ширины, но только до точки, относящейся к ограничивающей квадрат, который в этом случае равен 175px. Поэтому вместо того, чтобы смазывать ширину вниз на квадрат, она просто заполняет квадрат, а затем любая дополнительная визуальная информация по ширине (т.е. Переполнение) скрыта с переполнением: скрыто.

Он работает так же, как и для портрета, только при переключении ширины и высоты, где высота автоматически, а ширина - 175 пикселей. В основном в каждом случае любое измерение превышает другое, для него установлено значение auto, потому что, естественно, более крупным размером будет тот, который будет переполняться за пределы заданных размеров миниатюр (175 пикселей x 175x).

И если вы хотите добавить поля между большими пальцами, например, 5px white margin, вы можете использовать свойство border, иначе не будет поля, в котором информация переполнена.

Надеюсь, это имеет смысл.

Ответ 4

Определите ширину и высоту изображения, затем активный портретный или альбомный класс изображения. Если портрет выполнен {height:175px; width:auto}. Если пейзаж, обратная высота и ширина.

Ответ 5

Это может помочь.

CSS

.image{
-moz-border-radius: 30px; /* FF1+ */
-webkit-border-radius: 30px; /* Saf3-4 */
border-radius: 30px; /* Opera 10.5, IE 9, Saf5, Chrome */
}

HTML:

<div class="image"></div>

Это сработало для меня. Просто поместите URL-адрес изображения внутри div.