16 августа 2013 в 10:13
Структура шаблона
Есть у меня карусель сделанная через Views, которая выводится в div_2
class="div_1" его ширина 70%
class="div_2" его ширина 30%
как сделать так чтобы картинки которые вертятся в каруселе всегда были в полный размер дива_2
т.е. при больших разрешениях экрана картинка растягивалась пропорционально (четкость не важна) при малых разрешениях экрана она - уменьшалась пропорционально
при увеличение масштаба браузера она тоже строилась под заданный процент дива_2
такое реализуемо средствами CSS копаю уже неделю пробую не выходит что-то...
Комментарии
Сделай ширину картинки в div_2 равной 100%, а высоту - auto
height: auto;
width: 100%;
}
дело в том что карусль виев кучу классов еще сует и потому в классе div_2
такое еще сидит
<div class="contextual-links-wrapper contextual-links-processed">
<div class="content">
<div class="view view-clone-of-quotes view-id-clone_of_quotes view-display-id-block carusel-views view-dom-id-0c901bba2cf93dac24d2e5a837034851">
<div class="view-content">
<div class="skin-default">
<div id="views_slideshow_cycle_main_clone_of_quotes-block" class="views_slideshow_cycle_main views_slideshow_main viewsSlideshowCycle-processed">
<div id="views_slideshow_cycle_teaser_section_clone_of_quotes-block" class="views-slideshow-cycle-main-frame views_slideshow_cycle_teaser_section" style="position: relative; width: 482px; height: 265px;">
<div id="views_slideshow_cycle_div_clone_of_quotes-block_0" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-1 views-row-odd" style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0; width: 482px; height: 265px;">
<div class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
<div class="views-field views-field-field-image-group">
<div class="field-content">
<img width="480" height="319" alt="" src="/default/files/styles/banner/public/sgpzugncrew.jpg?itok=PFMT6Od6">
</div>
</div>
</div>
</div>
<div id="views_slideshow_cycle_div_clone_of_quotes-block_1" class="views-slideshow-cycle-main-frame-row views_slideshow_cycle_slide views_slideshow_slide views-row-2 views_slideshow_cycle_hidden views-row-even" style="position: absolute; top: 0px; left: 0px; z-index: 3; opacity: 1; display: block; width: 482px; height: 265px;">
<div class="views-slideshow-cycle-main-frame-row-item views-row views-row-0 views-row-first views-row-odd">
<div class="views-field views-field-field-image-group">
<div class="field-content">
<img width="480" height="319" alt="" src="/sites/default/files/styles/banner/public/fc4el-68xdk.jpg?itok=c8snYh8b">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Примерно так
#block-views-product-block-1 .view-display-id-block_1 .jcarousel-skin-default .jcarousel-container-horizontal{ width:838px; height:180px; padding:10px 0; margin:0 0 0 20px;}
#block-views-product-block-1 .view-display-id-block_1 .jcarousel-skin-default .jcarousel-clip-horizontal{ width:100%;border-top:2px solid #eee;border-bottom:2px solid #eee;padding:8px 0;}
#block-views-product-block-1 .view-display-id-block_1 .jcarousel-skin-default .jcarousel-next{ background:url(../images/jq.png) no-repeat; width:25px; height:162px; top:5px; right:-26px; display:block;}
#block-views-product-block-1 .view-display-id-block_1 .jcarousel-skin-default .jcarousel-prev{ background:url(../images/jqp.png) no-repeat; width:25px; height:162px; top:5px; left:-25px; display:block;}
#block-views-product-block-1 .view-display-id-block_1 .jcarousel-skin-default li.jcarousel-item{ width:160px !important; height:130px; padding:0; border:none;}
#block-views-product-block-1 .view-display-id-block_1 .jcarousel-skin-default li.jcarousel-item img{ border:1px solid #eee;}