LINUX.ORG.RU

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

 , csss


0

1

Делаю презентацию в csss. Нужно сделать слайд, содержащий заголовок и картинку. Код примерно такой:

<section>
<h2>Title</h2>
<img src="a.png" alt="a">
</section>
Section занимает весь экран: у него postion: absolute, left, right, top, bottom: 0; еще border какой-то и padding. У заголовка все стандартно, а изображение заведомо больше свободной области. Как сделать так, чтобы оно было после заголовка и заканчивалось перед концом section, соблюдая отступы?

★★★★★

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

kostik87 ★★★★★
()

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

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

DeadEye ★★★★★
()
Ответ на: комментарий от DeadEye

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

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

Klymedy ★★★★★
() автор топика
Ответ на: комментарий от kostik87

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

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

Ghostwolf ★★★★
()
Последнее исправление: Ghostwolf (всего исправлений: 1)

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

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

kep
()
Ответ на: комментарий от Ghostwolf

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

Klymedy ★★★★★
() автор топика
Ответ на: комментарий от Klymedy

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

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

no-such-file ★★★★★
()

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

<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>
nutsandmilk ★★★
()

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

http://jsfiddle.net/2jtx5w2k/

deep-purple ★★★★★
()
Ответ на: комментарий от nutsandmilk

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

Klymedy ★★★★★
() автор топика
Ответ на: комментарий от Klymedy

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

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

Vit ★★★★★
()

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

Vit ★★★★★
()
Ответ на: комментарий от Klymedy

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

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

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

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

Vit ★★★★★
()
Ответ на: комментарий от Vit

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

Klymedy ★★★★★
() автор топика
Ответ на: комментарий от Klymedy

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

Klymedy ★★★★★
() автор топика
Ответ на: комментарий от Klymedy

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

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

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

Vit ★★★★★
()
Ответ на: комментарий от Klymedy

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

Vit ★★★★★
()
Ответ на: комментарий от anonymous

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

Klymedy ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.