0

при уменьшении размера жкрана до sm & xs блок выезжает вправоПодскажите пожалуйста, КАК можно сделать блок div, чтоб у него были свойства как у img class="img-responsive" .

<div class="container">
   <div class="row">
      <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12">
           <img src="image/banner-1.jpg" class="img-responsive">
      </div>
              
      <div class="col-md-8 col-lg-8 hidden-sm hidden-xs" id="md-lg">
          <p>333</p>
      </div>
   </div>           
 
   <div class="col-sm-12 col-xs-12 hidden-lg hidden-md" id="sm-xs" >
       <p>333</p>
  </div>    
          

sm-xs {

background-color: gray;
max-width: 370px;

}

md-lg {

background-color: gray;
min-height: 225px;

}

вот как должны получиться блоки в итоге.... ВСЕ Ваши варианты перепробовал.... + -  серый блок вылазит......вот сделал, чтоб он аккуратно на sm-xs размерах переходил вниз и не вылазил....но этот серый блок пришлось писать дважды....а это коряво и замедлит загрузку страницы вдвое.........(((

3 ответа 3

2

Если вам нужно, чтобы div повторял ширину картинки, сделайте так:

Поставьте max-width, равный ширине картинки. Например, если ширина картинки 640px:

max-width:640px;

Тогда блок при ширине браузера больше чем картинка будет повторять ее ширину.

.responz{
   max-width:640px;
   background:#ccc;
   padding:30px;
   box-sizing:border-box;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placeimg.com/640/480/tech" class="img-responsive">
<div class="responz">test</div>

Если вы хотите сделать блок, у которого высота будет зависеть от ширины, есть такой путь:

Сделать Padding-top в процентах. Тогда высота блока будет в указанных процентах от ширины.

Но тогда контент в блоке нужно будет наложить поверх с помощью position: absolute;

.respons {
  padding-top: 15%;
  overflow: hidden;
  background:gray;
}
.content {
  position: absolute;
  top:10px;
}
<div class=respons>
  <div class=content>Content</div>
</div>

7
  • да, оно создает,но свойства responsive как у класса img (img-responsive) у него нет! 25 янв 2017 в 15:56
  • Поясните, какие свойства?
    – Crantisz
    25 янв 2017 в 16:30
  • А хак клёвый, я о таком не знаю.
    – wokalek
    25 янв 2017 в 22:39
  • @VostokSisters, извините, но я не понимаю, можете написать подробнее, что имеется ввиду?
    – Crantisz
    26 янв 2017 в 5:27
  • @Crantisz, в теги к вопросу глянь! Бутстрап! Погугли.
    – wokalek
    26 янв 2017 в 9:06
0

1). Возможно так требуется ... jsfiddle

body{
  background-color: #EFF1F5;
}
.alternative_img-responsive{
  background-image: url(http://placehold.it/800x450);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  max-width: 800px;
  height: 450px;
}
 <div class="alternative_img-responsive"></div>

2). Или вариант с текстом Codepen

3). Третий вариант(кажется аналогом img-responsive у bootstrap3), сделал специально сразу на несколько блоков: Codepen

.wrapper {
  margin-top: 100px;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 2;
  -moz-column-gap: 2;
  column-gap: 2;
}
.wrapper .respon {
  display: block;
  text-align: center;
  background-color: #808080;
  color: #fff;
  padding: 30px 60px;
}
.wrapper .respon h2 {
  font-size: 60px;
  margin-bottom: 10px;
}
.wrapper .respon p {
  font-size: 20px;
}

@media (max-width: 1050px) {
  .wrapper .respon h2 {
    font-size: 30px;
  }
  .wrapper .respon p {
    font-size: 16px;
  }
}
@media (max-width: 750px) {
  .wrapper .respon {
    padding: 15px 30px;
  }
  .wrapper .respon h2 {
    font-size: 20px;
  }
  .wrapper .respon p {
    font-size: 14px;
  }
}
@media (max-width: 480px) {
  .wrapper {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
  }
  .wrapper .respon {
    padding: 15px 30px;
    margin: 5px;
  }
  .wrapper .respon h2 {
    font-size: 20px;
    margin-bottom: 6px;
  }
  .wrapper .respon p {
    font-size: 14px;
  }
}
<div class="wrapper">
  <div class="respon">
    <h2>Hello</h2>
    <p>Content1</p>
  </div>
  <div class="respon">
    <h2>Hello</h2>
    <p>Content2</p>
  </div>
  <div class="respon">
    <h2>Hello</h2>
    <p>Content3</p>
  </div>
  <div class="respon">
    <h2>Hello</h2>
    <p>Content4</p>
  </div>  
</div>

0

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

Одно-пиксельное (пропорциональное), прозрачное png внутри блока, и контейнер для контента рядом с ним:

HTML

<div class="parent">
   <img class="aspect-ratio" src="images/aspect-ratio.png" />
   <div class="content">Content</div>
</div>

CSS

.parent {
  position: relative;
}
.aspect-ratio {
  width: 100%;
  height: auto;
}
.content {
  position: absolute;
  width: 100%;
  top: 0; left: 0;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.