Уменьшение высоты картинки без сплющивания

@Dmitri446 · Регистрация: 15.01.2014

Студворк — интернет-сервис помощи студентам

Возможно ли уменьшить высотe картинки без сплющивания средствами css?

@Fedor92 · 17.11.2016, 17:17

Dmitri446, смотря что Вы понимаете под сплющиванием... Конкретно пример Вашего кода, что именно интересует? И со скринами...

@Dmitri446 · 17.11.2016, 18:18 **[ТС]**

допустим такой пример

HTML5
1
<img src = "/img/IMAGE.png">

CSS
1
2
img{
height:100px;

картинка слева с применением css, справа без.
Мне нужно чтобы левая картинка при изменении высоты сохранила свой масштаб что ли(не знаю как правильно описать)

@Fedor92 · 17.11.2016, 18:27

Dmitri446, к примеру можно так попробовать:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{
            width:100%;
            height:auto
        }
    </style>
</head>
<body>
    <img src="images/header.jpg" alt="">
</body>
</html>

@Dmitri446 · 17.11.2016, 18:46 **[ТС]**

не работает...

@Fedor92 · 17.11.2016, 19:17

Сообщение от Dmitri446

не работает...

Код, который я предложил, подстраивает высоту картинки под её ширину... Соотвественно, если сужать окно броузера, то высота картинки будет уменьшаться пропорционально ширине, таким образом не сплющится...

Теперь вернёмся к начальному вопросу... Если задать высоту или ширину фиксированно, то нужного эффекта Вы не добьётесь, если только медиазапросами, но это вариант на костылях... Можно конечно попробовать заюзать свойство calc, но это тоже не лучший вариант..

@Moze · 17.11.2016, 20:23

Можно использовать определённый пропорциональный размер для картинок, но это в редких случаях

@newJS · 19.11.2016, 06:46

Вы что тут ерундой занимаетесь? при указании любого размера браузер автоматом масштабирует вторую сторону, ну не умеет он по другому в таком случае
Dmitri446, твой код, из поста 3, работает как надо!, значит что то где то перебивает, ищи

Fedor92, картинка 100% это на весь экран!!!!, нельзя в процентах давать

только что про это было
Масштабирование изображения

@Fedor92 · 19.11.2016, 11:07

Сообщение от newJS

Fedor92, картинка 100% это на весь экран!!!!, нельзя в процентах давать

Во-первых, это не к Вам вопрос или Вы уже ванговать начали? Во-вторых, почему нельзя задавать ширину картинки в процентах интересно, кто - то запрещал? ТС? Нет... Разработчики спецификации? Тоже нет... Или это Ваша фантазия запрещает?

Сообщение от Dmitri446

Возможно ли уменьшить высотe картинки без сплющивания средствами css?

Это говорит о том, что ТС задумал изменять размер картинки, значит её размеры динамические, а не статические...

Сообщение от Dmitri446

Мне нужно чтобы левая картинка при изменении высоты сохранила свой масштаб что ли(не знаю как правильно описать)

А здесь уже конкретно пояснил свои намерения... Подчёркиваю словосочетание "при изменении высоты"... Просыпайтесь коллега...

@newJS · 19.11.2016, 16:50

если картинке дать размер в процентах, то это не от размера картинки, а от окна браузера
если дать картинкеиразмер в пикселях по любой стороне, то браузер сам всё правильно отмасштабирует

ребятки, вы бы в браузере попробовали сначала, чё он показывает, ну лень скрины делать

@Fedor92 · 19.11.2016, 16:58

Сообщение от newJS

если картинке дать размер в процентах, то это не от размера картинки, а от окна браузера

Совсем не обязательно...

У картинки может и обёртка есть... Ширина обёртки может быть высчитана под любой экран, также как и её высота независимо от размеров окна броузера... Если задать ширину или высоту в пикселях картинка вообще ничего менять не будет, а будет статична... А нам нужен динамичный вариант с изменением высоты...

@Dmitri446 · 20.11.2016, 14:30 **[ТС]**

я вот что подумал, может будет проще сделать то что я задумал средствами photoshop и уже использовать готовое изображение при верстке...

@Fedor92 · 20.11.2016, 14:39

Сообщение от Dmitri446

я вот что подумал, может будет проще сделать то что я задумал средствами photoshop и уже использовать готовое изображение при верстке...

Это был бы самый грамотный ход...

Но на всякий случай почитайте посты, может Вам пригодятся...

@N3stY · 20.11.2016, 14:56

Dmitri446, ну так значит где то у вас есть свойство которое дает в приоритете ширину 100%
Результат JSFiddle

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            width: auto !important;
            height: 100px !important;
        }
    </style>
</head>
<body>
    <img src="http://cdn.citylab.com/media/img/citylab/2016/05/Screen_Shot_2016_05_12_at_10.50.50_AM/lead_large.png?1463161865" alt="">
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@Dmitri446 0 / 0 / 0 Регистрация: 15.01.2014 Сообщений: 65

	Уменьшение высоты картинки без сплющивания 17.11.2016, 17:15. Показов 8578. Ответов 13 Метки нет (Все метки) Возможно ли уменьшить высотe картинки без сплющивания средствами css? 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	17.11.2016, 17:17
	Dmitri446, смотря что Вы понимаете под сплющиванием... Конкретно пример Вашего кода, что именно интересует? И со скринами... 1

@Dmitri446 0 / 0 / 0 Регистрация: 15.01.2014 Сообщений: 65
	17.11.2016, 18:46 [ТС]
	не работает... 0

@Moze 10 / 10 / 4 Регистрация: 02.06.2015 Сообщений: 92
	17.11.2016, 20:23
	Можно использовать определённый пропорциональный размер для картинок, но это в редких случаях 1

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	19.11.2016, 06:46
	Вы что тут ерундой занимаетесь? при указании любого размера браузер автоматом масштабирует вторую сторону, ну не умеет он по другому в таком случае Dmitri446, твой код, из поста 3, работает как надо!, значит что то где то перебивает, ищи Fedor92, картинка 100% это на весь экран!!!!, нельзя в процентах давать только что про это было Масштабирование изображения 1

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	19.11.2016, 16:50
	если картинке дать размер в процентах, то это не от размера картинки, а от окна браузера если дать картинкеиразмер в пикселях по любой стороне, то браузер сам всё правильно отмасштабирует ребятки, вы бы в браузере попробовали сначала, чё он показывает, ну лень скрины делать 1

@Dmitri446 0 / 0 / 0 Регистрация: 15.01.2014 Сообщений: 65
	20.11.2016, 14:30 [ТС]
	я вот что подумал, может будет проще сделать то что я задумал средствами photoshop и уже использовать готовое изображение при верстке... 0