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

Обрезать изображение - HTML, CSS

24.11.2015, 13:35. Просмотров 1088. Ответов 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
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Обрезать изображение (HTML, CSS):

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

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

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

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

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

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

11
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2553 / 2217 / 1002
Регистрация: 15.12.2012
Сообщений: 8,156
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
Сообщений: 277
24.11.2015, 13:47  [ТС] #3
Fedor92, она сплющевается. Нужно чтобы именно обрезалась
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2553 / 2217 / 1002
Регистрация: 15.12.2012
Сообщений: 8,156
24.11.2015, 13:52 #4
Лучший ответ Сообщение было отмечено Trances как решение

Решение

Цитата Сообщение от Trances Посмотреть сообщение
Fedor92, она сплющевается. Нужно чтобы именно обрезалась
Ну значит родительскому блоку задайте высоту в 500px...
1
Trances
1 / 1 / 1
Регистрация: 03.02.2014
Сообщений: 277
24.11.2015, 14:04  [ТС] #5
Fedor92, можно ли как-то еще картинку выровнять по вертикали?
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2553 / 2217 / 1002
Регистрация: 15.12.2012
Сообщений: 8,156
24.11.2015, 14:09 #6
Цитата Сообщение от Trances Посмотреть сообщение
Fedor92, можно ли как-то еще картинку выровнять по вертикали?
Смотря, что Вы имеете ввиду... Выкладывайте полный код и посмотрим вместе чего Вы хотите добиться... Самый простой способ коррекции размера картинки - фотошоп...
0
Trances
1 / 1 / 1
Регистрация: 03.02.2014
Сообщений: 277
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
2553 / 2217 / 1002
Регистрация: 15.12.2012
Сообщений: 8,156
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
Сообщений: 277
24.11.2015, 14:22  [ТС] #9
Fedor92, у изображения высота стала во весь экран
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2553 / 2217 / 1002
Регистрация: 15.12.2012
Сообщений: 8,156
24.11.2015, 14:24 #10
Примерчик... cyberforum.rar
0
Trances
1 / 1 / 1
Регистрация: 03.02.2014
Сообщений: 277
24.11.2015, 14:28  [ТС] #11
Fedor92, заменяю на свою (1920x1200) и нет такого эффекта
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2553 / 2217 / 1002
Регистрация: 15.12.2012
Сообщений: 8,156
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
Привет! Вот еще темы с решениями:

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

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

Обрезать часть border
Каким способом можно наложить кружки при этом обрезать часть border ? Пример...

Подскажите как обрезать текст
Суть проблемы такова.. Есть страничка на которой отображается набор статей...


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

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

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