Спрятать часть изображения средствами CSS (original) (raw)

Третий день бьюсь, ничего не получается. Уже весь http://www.w3.org/TR/CSS21/ вдоль и поперёк прочитал.

Требуется средствами CSS, да так, чтобы во всех основных браузерах работало, вот такую конструкцию:

<img src="..." class="copyrighted">

или, на худой конец, такую:

<div class="copyrighted"><img src="..."></div>

привести к виду, показанному слева:

, где зелёным показано собственно изображение, а заштрихована его невидимая часть. Эта невидимость должна достигаться средствами CSS. Допускается также некоторое количество «обвески» из HTML.

Пока что я научился делать только то, что показано справа, но это очевидно:

img { background-color: #e0e0e0; border: 1px solid #cccccc; padding: 5px; }

Размер изображения считать заранее неизвестным. Однако, если без этого совсем никак, буду требуемые циферки вытаскивать через PHP — с этими данными достаточно просто указать height: ... и overflow: hidden;. Но очень не хотелось бы — это лишняя нагрузка на сервер, и не будет работать, скажем, в ЖЖ.

JavaScript, в общем, также возможен, однако крайне нежелателен по тем же (и некоторым другим) причинам.

Использовать <iframe> как-то совсем кисло (слишком много наворотов, дополнительные страницы надо делать, размеры картинки вытаскивать и т.д.), хотя с ним, конечно, всё получится.

Если сделать невидимую область снизу невозможно, пусть она будет с любой другой стороны, да хоть со всех четырёх — это не принципиально.

Поясню, для чего это нужно; авось, ещё кому-нибудь пригодится. Надоело портить публикуемые снимки «водяными знаками», а как-то обозначать авторство, по крайней мере, для честных людей, надо. Поэтому хочу к каждой картинке приделывать снизу полосу с копирайтом, но при отображении в браузере в составе страницы эту полосу скрывать. А рамка нужна из эстетических соображений; можно и без неё, если она чем-то мешает. Вставить всё в ещё один <div> несложно.

UPD: Всем спасибо, решение найдено. См. комменты.