Растянуть изображение слайдера над родительским div

Question

Я использую wordpress умный слайдер, и я хочу выровнять текст слоя в той же строке, что и логотип. Целая страница находится под бутстрапом строка класс, класс строки имеет max-width:75em.

Теперь, если я хочу, чтобы мой слой совпал с моим логотипом на всех экранах, но также я хочу, чтобы изображение было растянуто на 100%, как я могу это сделать?

Я могу сделать растягивающее изображение слайдера, активирующее сила полная ширина опция, но позиция моего слоя оставлена: 0 и не совпадает с моим логотипом.

Если мой вопрос слишком запутанный, чем картина 1000 слов:

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

Полный HTML-код:

<div class="section-element"><div class="row"> 
    <div class="lee-col large-12 columns vc_"> 
     <div class="wpb_wrapper"> 

    <div class="wpb_text_column wpb_content_element "> 
     <div class="wpb_wrapper"> 

<!-- Nextend Smart Slider 3 #1 - BEGIN --> 
<div id="n2-ss-1-align" class="n2-ss-align"><div class="n2-padding"><div id="n2-ss-1" class="n2-ss-slider n2-ss-load-fade n2-ss-desktop n2-ss-loaded n2-hover" data-minfontsizedesktopportrait="4" data-minfontsizedesktoplandscape="4" data-minfontsizetabletportrait="4" data-minfontsizetabletlandscape="4" data-minfontsizemobileportrait="4" data-minfontsizemobilelandscape="4" style="font-size: 16px; width: 1200px; margin: 0px; height: 400px;" data-fontsize="16"> 
     <div class="n2-ss-slider-1 n2-grab" style="width: 1200px; padding: 0px; border-width: 0px; height: 400px;"> 
         <div class="n2-ss-slider-2"> 
           <div class="n2-ss-slider-3" style=""> 

        <div data-slide-duration="0" data-id="1" class="n2-ss-slide n2-ss-canvas n2-ss-slide-active n2-ss-slide-1" style="width: 1200px; height: 400px;"><div data-hash="49a8ed469d6983d4898be0971ac16459" data-desktop="http://smartslider3.com/sample/programmer.jpg" style="" class="n2-ss-slide-background" data-opacity="1"><img title="" style="width: 100%; height: auto; margin-top: -100px; opacity: 1; margin-left: 0px;" class="n2-ss-slide-background-image n2-ss-slide-fill n2-ow" data-x="50" data-y="50" src="http://smartslider3.com/sample/programmer.jpg" alt=""></div><div class="n2-ss-layers-container" style="width: 1200px; height: 400px; margin-top: 0px; margin-left: 0px;"><div class="n2-ss-layer" style="z-index: 1; overflow: visible; text-align: left; left: 0px; top: 121px; width: auto; height: auto; font-size: 16px; display: block; right: auto; bottom: auto;" data-class="" data-rotation="0" data-adaptivefont="1" data-generatorvisible="" data-desktopportrait="1" data-desktoplandscape="1" data-tabletportrait="1" data-tabletlandscape="1" data-mobileportrait="1" data-mobilelandscape="1" data-responsiveposition="1" data-responsivesize="1" data-desktopportraitleft="0" data-desktopportraittop="-32" data-desktopportraitwidth="auto" data-desktopportraitheight="auto" data-desktopportraitalign="left" data-desktopportraitvalign="middle" data-desktopportraitparentalign="center" data-desktopportraitparentvalign="middle" data-desktopportraitfontsize="100" data-mobileportraitleft="0" data-mobileportraittop="-319" data-mobileportraitalign="center" data-mobileportraitvalign="bottom" data-mobileportraitfontsize="120"><h2 id="n2-ss-1item1" class="n2-font-c6db53bc8d0276ac23eccdcad105cb45-hover n2-style-d0ece63067cc58abc562810eba088c5b-heading n2-ow" style="display:block;white-space:nowrap;">Martin Dwyer</h2></div><div class="n2-ss-layer" style="z-index: 2; overflow: visible; text-align: left; left: 1px; top: 232px; width: auto; height: auto; font-size: 16px; display: block; right: auto; bottom: auto;" data-class="" data-rotation="0" data-adaptivefont="1" data-generatorvisible="" data-desktopportrait="1" data-desktoplandscape="1" data-tabletportrait="1" data-tabletlandscape="1" data-mobileportrait="1" data-mobilelandscape="1" data-responsiveposition="1" data-responsivesize="1" data-desktopportraitleft="-474" data-desktopportraittop="59" data-desktopportraitwidth="auto" data-desktopportraitheight="auto" data-desktopportraitalign="center" data-desktopportraitvalign="middle" data-desktopportraitparentalign="center" data-desktopportraitparentvalign="middle" data-desktopportraitfontsize="100"><h2 id="n2-ss-1item2" class="n2-font-1009-hover n2-ow" style="display:block;">Heading layer</h2></div></div></div>    </div> 
      </div> 
     </div> 
     <div data-ssleft="0+15" data-sstop="height/2-previousheight/2" id="n2-ss-1-arrow-previous" class="n2-ss-widget n2-ss-widget-display-desktop n2-ss-widget-display-tablet n2-ss-widget-display-mobile nextend-arrow n2-ib nextend-arrow-previous nextend-arrow-animated-fade" style="position: absolute; width: 32px; height: 32px; top: 184px; left: 15px;"><img class="n2-ow" data-no-lazy="1" data-hack="data-lazy-src" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNDMzIDE1Ljk5MkwyMi42OSA1LjcxMmMuMzkzLS4zOS4zOTMtMS4wMyAwLTEuNDItLjM5My0uMzktMS4wMy0uMzktMS40MjMgMGwtMTEuOTggMTAuOTRjLS4yMS4yMS0uMy40OS0uMjg1Ljc2LS4wMTUuMjguMDc1LjU2LjI4NC43N2wxMS45OCAxMC45NGMuMzkzLjM5IDEuMDMuMzkgMS40MjQgMCAuMzkzLS40LjM5My0xLjAzIDAtMS40MmwtMTEuMjU3LTEwLjI5IiBmaWxsPSIjZmZmZmZmIiBvcGFjaXR5PSIwLjgiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==" alt="Arrow"></div><div data-ssright="0+15" data-sstop="height/2-nextheight/2" id="n2-ss-1-arrow-next" class="n2-ss-widget n2-ss-widget-display-desktop n2-ss-widget-display-tablet n2-ss-widget-display-mobile nextend-arrow n2-ib nextend-arrow-next nextend-arrow-animated-fade" style="position: absolute; width: 32px; height: 32px; top: 184px; right: 15px;"><img class="n2-ow" data-no-lazy="1" data-hack="data-lazy-src" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuNzIyIDQuMjkzYy0uMzk0LS4zOS0xLjAzMi0uMzktMS40MjcgMC0uMzkzLjM5LS4zOTMgMS4wMyAwIDEuNDJsMTEuMjgzIDEwLjI4LTExLjI4MyAxMC4yOWMtLjM5My4zOS0uMzkzIDEuMDIgMCAxLjQyLjM5NS4zOSAxLjAzMy4zOSAxLjQyNyAwbDEyLjAwNy0xMC45NGMuMjEtLjIxLjMtLjQ5LjI4NC0uNzcuMDE0LS4yNy0uMDc2LS41NS0uMjg2LS43NkwxMC43MiA0LjI5M3oiIGZpbGw9IiNmZmZmZmYiIG9wYWNpdHk9IjAuOCIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9zdmc+" alt="Arrow"></div> 
</div><div class="clear"></div></div></div> 
<!-- Nextend Smart Slider 3 #1 - END --> 


     </div> 
    </div> 

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

Answer 1

Используйте полного варианта шириной для слайдера и обертывания содержание каждого слайда в

<div class="container"> 
    <!-- Content here --> 
</div>