2016-06-12 2 views
0

У меня есть дизайн, который нуждается, а изображение и текст выравниваются рядом друг с другом в div (используя col-md-6) Мне нужно изображение высот, чтобы изменить размер текста текста div.on и мобильный имеет быть 12 Расположение столбцовResize Image Div с уважением text div рядом с ним

Вот мой HTML код

<div class="row fixed-height"> 
        <div class="col-md-6 full-screen-col img-head"></div><!--col for imag row ends here--> 
        <div class="col-md-6 cont-bg full-screen-col"> 
        <div class="description_container"> 
         <h1>JOIN OUR TEAM</h1> 
         <p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth 
         opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p> 
        </div> 
        </div><!--container for text details--> 
       </div><!--row fors slide container --> 

Здесь используется CSS.

.fixed-height{ 
    height: 300px; 
    overflow-y: hidden; 
} 

.img-head{ 
    background-image: url(../images/Gaspars-Construction-Employee-Photo-1024x683.jpg); 
    background-size: cover; 
    height: 100%; 
} 

Маленькая помощь очень ценится. Заранее спасибо

+0

использование см для мобильного устройства. – frnt

ответ

0

Это должно работать: HTML

<div class="row fixed-height"> 
    <div class="col-md-6 full-screen-col img-head"> 
      <img src="https://dncache-mauganscorp.netdna-ssl.com/thumbseg/308/308116-bigthumbnail.jpg"/> 
    </div><!--col for imag row ends here--> 
    <div class="col-md-6 cont-bg full-screen-col"> 
      <div class="description_container"> 
       <h1>JOIN OUR TEAM</h1> 
       <p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p> 
      </div> 
    </div><!--container for text details--> 
</div><!--row fors slide container --> 

CSS

.img-head{ 
    float: left; 
} 
+0

при изменении размера изображения мобильного телефона и планшета не видно – Sandy

+0

, аналогично col-md-6, есть одно имя класса для мобильных устройств в бутстрапе. проверьте его и используйте, он должен работать. – denis

+0

, когда я добавляю sm-12 изображение не видно – Sandy

0

Добавить это,

<div class="row fixed-height"> 
       <div class="col-md-6 col-sm-6 full-screen-col img-head"></div><!--col for imag row ends here--> 
       <div class="col-md-6 col-sm-6 cont-bg full-screen-col"> 
       <div class="description_container"> 
        <h1>JOIN OUR TEAM</h1> 
        <p>We except a lot from our team members, and we give a lot in return- like ongoing training, professional growth 
        opportunities and competitive benefits. if Gaspar's sounds like your kind of workplace, we'd love to hear from you</p> 
       </div> 
       </div><!--container for text details--> 
      </div><!--row fors slide container --> 
Смежные вопросы