Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
Trances
1 / 1 / 1
Регистрация: 03.02.2014
Сообщений: 278
#1

Обрезать изображение

24.11.2015, 13:35. Просмотров 1157. Ответов 11
Метки нет (Все метки)

HTML5
1
2
3
<div style="overflow:hidden;">
<img style="width: 100%;" src="img/1.jpg" />
</div>
Как сделать так, чтобы высота была фиксированной? Т.е., например 500 пикселе, но при этом ширина была по размеру экрана?
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.11.2015, 13:35
Ответы с готовыми решениями:

Как обрезать изображение?
Есть код. &lt;div style=&quot;margin-bottom:-125px; overflow:hidden;&quot;&gt; &lt;img...

Подскажите, как сделать в html, чтобы изображение накладывалось на другое изображение?
Нужно, чтобы изображение накладывалось на другое изображение, а другое...

При наведении на изображение,изображение должн немного затемнится и + по центру изображения треугольник
Вот допустим у меня 3 картинки: нужно чтоб при наведении на любую из...

Как сделать прозрачным фон изображение, а не само изображение?

Рамка при наведении на изображение - изображение скачет, как сделать, чтобы они не изменяли позицию?
Хочу сделать рамку при наведении на изображение, но изображение скачет, как...

11
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2631 / 2276 / 1016
Регистрация: 15.12.2012
Сообщений: 8,431
Записей в блоге: 1
24.11.2015, 13:45 #2
Так не годится что ли?

HTML5
1
2
3
<div style="overflow:hidden;">
     <img style="width: 100%; height:500px" src="img/1.jpg" />
</div>
0
Trances
1 / 1 / 1
Регистрация: 03.02.2014
Сообщений: 278
24.11.2015, 13:47  [ТС] #3
Fedor92, она сплющевается. Нужно чтобы именно обрезалась
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2631 / 2276 / 1016
Регистрация: 15.12.2012
Сообщений: 8,431
Записей в блоге: 1
24.11.2015, 13:52 #4
Лучший ответ Сообщение было отмечено Trances как решение

Решение

Цитата Сообщение от Trances Посмотреть сообщение
Fedor92, она сплющевается. Нужно чтобы именно обрезалась
Ну значит родительскому блоку задайте высоту в 500px...
1
Trances
1 / 1 / 1
Регистрация: 03.02.2014
Сообщений: 278
24.11.2015, 14:04  [ТС] #5
Fedor92, можно ли как-то еще картинку выровнять по вертикали?
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2631 / 2276 / 1016
Регистрация: 15.12.2012
Сообщений: 8,431
Записей в блоге: 1
24.11.2015, 14:09 #6
Цитата Сообщение от Trances Посмотреть сообщение
Fedor92, можно ли как-то еще картинку выровнять по вертикали?
Смотря, что Вы имеете ввиду... Выкладывайте полный код и посмотрим вместе чего Вы хотите добиться... Самый простой способ коррекции размера картинки - фотошоп...
0
Trances
1 / 1 / 1
Регистрация: 03.02.2014
Сообщений: 278
24.11.2015, 14:11  [ТС] #7
Fedor92,
HTML5
1
2
3
<div style="overflow:hidden; height: auto; max-height: 450px;">
<img style="width: 100%;" src="img/1.jpg" />
</div>
Я имел ввиду, чтобы картинка располагалась по центру, но не по горизонтали, а по вертикали
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2631 / 2276 / 1016
Регистрация: 15.12.2012
Сообщений: 8,431
Записей в блоге: 1
24.11.2015, 14:19 #8
Возможен вот такой нетривиальный ход...
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>Picture</title>
        <meta charset="utf-8">
</head>
    <body>
<div style="display:table-cell; overflow:hidden; height: auto; min-height: 450px;border:2px solid red; vertical-align:middle;">
<img style="display:inline-block;  width: 100%;" src=pic.png" />
</div>
    </body>
</html>
Но для того чтобы использовать вертикальное выравнивание необходимо указать высоту(либо минимальную высоту) родительского блока...
0
Trances
1 / 1 / 1
Регистрация: 03.02.2014
Сообщений: 278
24.11.2015, 14:22  [ТС] #9
Fedor92, у изображения высота стала во весь экран
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2631 / 2276 / 1016
Регистрация: 15.12.2012
Сообщений: 8,431
Записей в блоге: 1
24.11.2015, 14:24 #10
Примерчик... cyberforum.rar
0
Trances
1 / 1 / 1
Регистрация: 03.02.2014
Сообщений: 278
24.11.2015, 14:28  [ТС] #11
Fedor92, заменяю на свою (1920x1200) и нет такого эффекта
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2631 / 2276 / 1016
Регистрация: 15.12.2012
Сообщений: 8,431
Записей в блоге: 1
24.11.2015, 14:33 #12
Trances, так заменяете?
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>Button</title>
        <meta charset="utf-8">
</head>
    <body>
<div style="display:table-cell; height:1200px;overflow:hidden;border:2px solid red; vertical-align:middle;">
<img style="display:inline-block;  width: 100%;" src="images/sun.gif" />
</div>
    </body>
</html>
0
24.11.2015, 14:33
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
24.11.2015, 14:33

Обрезать фото и увеличить
Здравствуйте! У меня есть фото, возможно его обрезать с помощью CSS? Нужно...

Обрезать по основному контенту
Колеги, такой вопрос : основная ширина сайта 960px но есть div которые вылазит...

Обрезать содержимое фрейма
Появилась необходимость поставить загрузку другого сайта через iframe, но вот...


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

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

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