Отобразить пропорционально картинку в модальном окне

[mstdmstd]

Всем привет,

Не подскажите, а как лучше отобразить пропорционально картинку(картинка может быть разных размеров и довольно большой и пропорций) в модальном окне,
где урл картинки будет присвоен картинке img_category_preview, вроде :

 

<div class="modal fade" id="show_category_image_dialog" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<div class="modal-title" > Category Preview</div>
</div>
<div class="modal-body">
<form role="form"  class="form-horizontal">

<div class="form-group" >
<label class="col-xs-12 col-sm-4 control-label" for="img_category_preview">Image</label>
<div class="col-xs-12 col-sm-8">
<span id="span_category_name"></span><br>
<img class="image_border" id="img_category_preview" ><br>
<span id="span_category_title"></span>
</div>
</div>

</form>

<div class="modal-footer">
<div class="btn-group  pull-right editor_btn_group " role="group" aria-label="group button">
<button type="button" class="btn btn-cancel-action" data-dismiss="modal"  role="button">Close</button>
</div>
</div>

</div>
</div>
</div>
</div>

я могу пропорции картинок подсчитать средствами php  и в этом модальном окне нарисовать для всех устройств и отображать только картинку для нужного девайса...

Но нет ли лучшего решения/библиотек в этом случае?


  Спасибо!
 

[andrey7287]

fancybox ?

[mstdmstd]

 Да, спасибо, помогло - картинка в попапе открывается в пределах девайса.
Но еще вопрос : у меня только одна картинка и нет иконки и большой картинки.
Можно ли fancybox приспособить и для отображения картинки в уачестве иконки для странице в размерах девайса без перерасчета вручную?
Если да, то как?