When reducing the size of the screen to sm & xs, the unit goes to the right Please tell me HOW you can make a div block so that it has properties like 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;

}

Here’s how the blocks should turn out in the end .... I tried all of your options .... + - the gray block crawls out ...... I did it so that it would go down carefully and not climb out on sm-xs sizes .... but this gray block had to be written twice .... and this is clumsily and will slow down the page loading in half ......... (((

    3 answers 3

    If you need a div repeat the width of the image, do this:

    Set max-width equal to the width of the image. For example, if the picture width is 640px:

     max-width:640px;

    Then a block with a browser width larger than the picture will repeat its width.

     .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>

    If you want to make a block whose height will depend on the width, there is such a way:

    Make Padding-top in percent. Then the height of the block will be in the specified percent of width.

    But then the content in the block will need to be superimposed over with position: absolute;

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

    • Yes, it creates, but it has no responsive properties like the img class (img-responsive)! - Alexander
    • Explain what properties? - Crantisz
    • A hack cool, I do not know about this. - VostokSisters
    • @VostokSisters, sorry, but I do not understand, can you write in more detail what is meant? - Crantisz
    • @Crantisz, look at the tags to the question! Bootstrap! Googled. - VostokSisters

    one). Perhaps this is required ... 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). Or option with text Codepen

    3). The third option (it seems like an img-responsive version of bootstrap3), made specially for several blocks at once: 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>

      There is an indented solution that has certain limitations. But there is a general solution, one of the most ancient, that works exactly as expected:

      A single-pixel (proportional), transparent png inside the block, and a content container next to it:

      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; }