как сделать блок div , как img-responsive?

327

27 января 2017, 05:02

Подскажите пожалуйста, КАК можно сделать блок 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;

}

Answer 1

Если вам нужно, чтобы 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>

Answer 2

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>

Answer 3

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

Одно-пиксельное (пропорциональное), прозрачное 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;
}