2013-02-26 2 views
2

У меня есть изображение внутри фрейма, установив атрибут Src из фрейма:укладка изображения внутри фрейма

<iframe src="path/to/my/image.jpg" class="myclass"></iframe> 

IFrame имеет фиксированную высоту и ширину. Я хочу, чтобы ширина этого изображения заполняла iframe, но его высота оставалась бы пропорциональной ширине, поэтому пользователь мог бы прокручивать вниз iframe, чтобы увидеть остальную часть изображения.
Как это сделать?
EDIT: JSFiddle link http://jsfiddle.net/2LExA/

+0

Можете ли вы jsfiddle? – abbood

+0

Я удалил свой ответ, не понимая, что это образ. В любом случае, если вы используете образ, который принадлежит вам, зачем использовать iframe? –

+0

, потому что я не хотел, чтобы отображалось полное изображение. Я хотел, чтобы он отображался во встроенном кадре, через который пользователь может прокручивать. – DarrenVortex

ответ

1

Вы используете iframe в первую очередь для отображения отдельной html-страницы, содержащей изображение. Поэтому вы должны использовать css для этой страницы, чтобы создать образ. Вы можете использовать css для настройки ширины вашего iframe, но не его содержимого.

Другой вариант - поместить изображение в div и создать образ относительно этого div.

HTML

<div><img src="yourimg" /></div> 

CSS

div{width:600px;height:300px;} 
img{width:50%;} 
+0

iframe динамически загружается на страницу, и я использую другое значение src для каждого iframe. – DarrenVortex

+0

Я решил это, установив src на php-страницу с именем show_image.php, а затем передал URL-адрес изображения в качестве строки запроса. На странице я сбросил img и установил его src в переданную строку запроса и установил его стиль ширины на 100%. Это сделало трюк, благодаря вашему намеку на использование другой страницы для изображения. +1, но я собираюсь опубликовать свой собственный ответ, так как это не полно. – DarrenVortex

2

Я установил ГКЗ фрейма на странице называется show_image.php и передал URL изображения в качестве строки запроса:

<iframe src="show_image.php?src=path/to/image.jpg" class="foobar"></iframe> 

Затем в show_image.php я сбросил img с его src, установленным в строку запроса и ширину до 100%:

<img src="<?php echo $_GET['src']; ?>" style="width:100%" /> 

Done! Благодаря подсказке lukeocom о том, что я должен поместить изображение на отдельную страницу.

+0

Хорошее предложение, спасибо. – skwidbreth

Смежные вопросы