CSS Help Отзывчивая тема

Question

У меня большая проблема с чем-то настолько маленьким, что я не могу понять это, и я обращаюсь ко всем здесь. Вопрос, который у меня есть, заключается в следующем:

У меня есть фотографии шириной примерно 512 пикселей или 800 пикселей. Я хочу поместиться, CENTERED, в области отображения круга и сохранить эффекты зависания. Мне также нужно отсортировать фотографии, чтобы центрированная часть отображала приличную фотографию.

Текущий код, с которым я работаю, сделает их идеальными кругами, если фотографии - идеальные квадраты. Проблема в том, что фотография является прямоугольником, она превращается в овал.

Я создал div как внизу, используя overflow: hidden и css, но это противоречило текущему CSS. Любая помощь будет очень благодарна!

.thumby { 
width:200px; 
margin: 0 auto; 
overflow:hidden; 
position: relative; 
height: 200px; 
border-radius: 100% 100% 100% 100%; 

}

img.absolutely { 
left: 50%; 
margin-left: -256px; 
top: 50%; 
margin-top: -200px; 
position:absolute; 
width:512px; 

}

Вот ссылка на мой Дев страниц.

http://www.lmcodebox.com/b-test/index5.html

http://www.lmcodebox.com/b-test/portfolio.html

Answer 1

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

То, что я в конечном итоге делает был оборачивать DIV вокруг моего тега вроде:

затем я установить фон А как это: стиль = "фон: URL (ФОТО URL ЗДЕСЬ) no-repeat; background-position: center; ">

Наконец, я сделал квадратное изображение (800 x 800), чтобы войти в тег A, чтобы он сохранял круглую форму и делал ее полностью прозрачной, чтобы фон изображение становится видимым, а растет и сокращается «отзывчивым» образом.

Answer 2

Вы думали о настройке изображения в качестве фона в DIV? Таким образом, вы сохраняете все эффекты, которые вы уже используете, и есть способы манипулировать фоновой позицией, не затрагивая внешний div. Другим возможным решением для создания идеальных круглых div, является использование :: after псевдокласс, например, в этом учебнике галереи: http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2

Извините, если я вас неправильно понял, надеюсь, что это поможет.

PS .: Красивая тестовая страница, кстати.

Answer 3

---

Ну во-первыхи, вам нужно только установить радиус границы до 50%, чтобы сделать что-то кругом, и если каждый угол имеет то же значение, то вы можете просто ввести его однажды так:

border-radius:50%; 

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

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

Прежде всего, я не вижу ширину или высоту, фактически объявленную на связанных страницах. Вы уверены, что поместили их в правильный класс? Я вижу, что радиус границы объявлен, но я вижу только максимальную ширину: 100%; не ширина: 200px или высота: 200px