Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.63/8: Рейтинг темы: голосов - 8, средняя оценка - 4.63
0 / 0 / 0
Регистрация: 24.07.2015
Сообщений: 61
1

Изменить пропорции фото

18.07.2016, 15:32. Просмотров 1668. Ответов 1
Метки нет (Все метки)


Здравствуйте всем!

В общем, задача:

Есть фото, прямоугольной формы. Нужно изменить пропорции - сделать фото квадратной например, не редактируя файл изображения. Отсечь "лишние" части по ровно слева и справа. Каким образом это можно сделать с помощью css?
HTML5
1
2
3
<div>
<img class="my_img">
</div>
И отобразить фото так, чтобы оно отцентрировалось по горизонтали, а "лишние" области спрятались за пределами левой и правой граници окна браузера.

Спасибо!
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
18.07.2016, 15:32
Ответы с готовыми решениями:

Пропорции картинок
Имеются 2 фоновые картинки, которые должны распологаться одна под другой. Адрес первой картинки:...

При нажатии на фото снизу оно замещало фото в окне сверху над ним
Здравствуйте подскажите кто сталкивался, как реализовать: при нажатии на фото снизу оно замещало...

Размер текста в пропорции блока
Есть блок ширина которого может быть разно. 50/100/150px и тд. Ширина может быть указана в...

При просмотре сайта на андроид изменились пропорции шрифта
Здравствуйте. Есть такая вот страница abrwasdfv.ml/shop . На странице есть блок &quot;Записаться на мой...

1
Эксперт HTML/CSS
651 / 554 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
18.07.2016, 16:07 2
George Sirin,
HTML5
1
2
3
<div class="wrap">
  <img src="http://d39kbiy71leyho.cloudfront.net/wp-content/uploads/2016/05/09170020/cats-politics-TN.jpg" alt="" >
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.wrap{
  width:400px;
  height:400px;
  overflow:hidden;
  position:relative;
}
.wrap img{
  display:block;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-300px;
  margin-top:-200px;
}
https://jsfiddle.net/shakalaka/g4dbnmy9/
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.07.2016, 16:07

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь или здесь.

Как сохранить пропорции высота ширина картинки во всех браузерах?
Всем приверт! Зарание, очень благодарен за любые подсказки.)) Вот сама старница, где в таблицу на...

Все фото слева, а текст справа. Нужно свой текст под своим фото
Вот такая ситуация, довльно простая, но до меня никак не допрёт как это сделать.. &lt;html&gt; &lt;head&gt;...

Как растянуть картинку на весь экран не потеряв пропорции при этом?
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;link...

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


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.