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

Вставь javascript, который при загрузке страницы будет высчитывать допустимые размеры и выставлять width и height атрибуты тега img.

соблюдая отступы

Думается мне, что width и height тебе хватит с головой. И margin для разных сторон потыкай.

Думается мне, что width и height тебе хватит с головой

А вот не хватает. Если указывать 100%, то съезжает вниз на высоту заголовка, если в пикселях — то не растягивается в зависимости от размера экрана.

Господи, даже это теперь без javascript люди не могут сделать?

Я не помню точного решения, но в свое время возился с этим для одного сайта. Копай в сторону max-width как для изображения (100%), так и его контейнера, а возможно и html/body тегов. Придется пошаманить, но уж лучше разобраться, чем использовать js где не надо.

Делаю презентацию в csss.

есть же reveal.js и deck.js, дальше тред не читал.

Т. е. изображение оборачивать еще в div?

съезжает вниз на высоту заголовка

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

Я тебя правильно понял?

<style>
section {position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden;}
img {max-width: 100%;}
</style>

<section>
<h2>Title</h2>
<img src="http://hdwallpaper-hd.com/wp-content/uploads/tumblr_static_bugs_wallpapers_298.jpg" alt="a">
</section>

Еще вариант. Пусть не совсем так как ты требуешь (что в чем лежать и почему), но показывающий что можно сделать гораздо более лаконично, без лишних оберточных тегов и жаваскриптов:

http://jsfiddle.net/2jtx5w2k/

Изображение съезжает вниз на высоту заголовка.

Тогда либо img {margin-top: -*высота заголовка*;}, либо h1 {position: absolute;}

Тогда оно наедет на заголовок.

Выложи пример на jsfiddle и т.п. Не понятно что за проблема.

На CSS кроме { max-width: 100%; } больше вроде нет ничего. Только у контейнера нельзя padding left/right делать. Либо margin, либо в еще один оборачивать для отступов.

Как сделать так, чтобы изображение не выезжало за экран? (комментарий)

Можно воткнуть как надо растянуктый DIV, а у него картинку назначить фоном. У фона параметры гибко крутятся.

https://jsfiddle.net/c61ahkmn/

Надо, чтобы изображение не вылезало за пределы section, не наезжало на заголовок и поля. Размеры section могут быть произвольные.

Так чем тогда тебе не нравится моя первая реализация?

Тем, что изображение выезжает: https://jsfiddle.net/c61ahkmn/1/

{ overflow: hidden } обрежет элементы за пределами блока.

Если я правильно понял, тебе надо чтобы наверху оставалась полоса заголовка без фона.

Если высота заголовка фиксирована - можно с отступами издокториться. Ну либо флексбокс. И картинку фоном.

Еще вариант - картинку сделать фоном на весь блок, а у заголовка зафорсить непрозрачный фон.

overflow: hidden обрежет картинку. Мне надо, чтобы изображение шло после заголовка и полностью влезало, т.е. его высота должна быть равна 100% - (высота заголовка).

А вообще лучше сделать более универсальный вариант, чтобы кроме заголовка мог быть еще какой-то текст перед изображением. А если можно — то и после него.

https://jsfiddle.net/c61ahkmn/2/

Ы ?

Ну ок, высоту 100%. А с шириной как быть? Может ведь не хватить. Или там точно панорама с запасом?

Если высоту «от и до, но с отступом» хочешь, тебе надо второй контейнер заводить, под картинку. Дальше проще всего фоном. Там вообще все что угодно настроить можно.

Второй DIV сообразишь как с отступом растянуть? Если браузер современный - сделай через флексбокс.

Оно обрезается (а нужно, чтобы масштабировалось) и залезает на поля.

Второй DIV тебе надо, барин. На чкартинке % с отступом одновременно не совместить.

Школиё.

http://codepen.io/anon/pen/JYaXwr

Спасибо, этот вариант работает. Только почему-то у меня слева образовалось пространство непонятно откуда, буду разбираться.

Ага, flex, flex и в продакшн: http://s3.postimg.org/5hve87npf/anon.png

Если у заголовка фиксированная высота, то calc() поможет.

Нет, не фиксированная.