Hello!

I use bootstrap for layout. How to align the width of the image with the parent unit?

enter image description here

Picture in this block:

<div class="row"> <div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12"> <img src="/img/template/taxi_logo_02.jpg" alt="логотип" class="img-responsive"> </div> </div>

And behind it is a block for content:

 <div class="row"> <div class="col-lg-12 col-mg-12 col-sm-12 col-xs-12 ijh"> <p>Здесь будет расположен весь остальной контент.</p> </div> </div>

You can see the entire layout here (no longer possible).

Thank.

Closed due to the fact that user207618, user194374, vp_arth , ߊߚߤߘ , Sasha Omelchenko are off topic by Feb. 23 'at 9:46 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • "The question is caused by a problem that is no longer reproduced or typed . Although similar questions may be relevant on this site, solving this question is unlikely to help future visitors. You can usually avoid similar questions by writing and researching a minimum program to reproduce the problem before publishing the question. " - Community spirit, Community spirit, vp_arth, ߊߚߤߘ, Sasha Omelchenko
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • Please replace the image with a blank (because the path is incorrect). Like so . - user207618
  • one
    remove - .ijh {background-color: rgb (235, 235, 235);} and add .telo2 {background-color: rgb (235, 235, 235);} - soledar10
  • @Other, do not understand you. I can see the image. - VladislavMSK
  • The comment is outdated. When there was a snippet, the image was not loaded there. - user207618
  • one
    @ VladislavMSK - because .row {margin-right: -15px; margin-left: -15px;} - soledar10

5 answers 5

In fact, you don’t have a picture there, it’s just an indent of another block: enter image description here

Block this here:

enter image description here

And in his picture above, I noted a class that has a background color. You can solve it like this:

enter image description here

In other words, just delete that class, ijh , from the code in your style.css , you don’t need it, because inside the block with this class, other blocks already have the m_mid_tpl class, which also sets you the background color with the rgb(235, 235, 235) value rgb(235, 235, 235) .

  • Thanks for the detailed answer, you are absolutely right, I understand it and did so intentionally. Because otherwise there is such a thing: habrastorage.org/files/b8e/2f9/b35/… - VladislavMSK
  • @ VladislavMSK, quickly checked in Mozilla and Chrome - everything is OK, no empty places. One way or another, deciding to fill the background in a row block is not the right way. I would advise either to change the structure of the blocks inside it so that this empty space does not remain, or, if you really can’t do it at all, change the indents in the bootstrap, but not in the framework file itself, but through connecting your custom.css and overriding it in it you need classes and so on. - Stanislav Belichenko
  • @ VladislavMSK, and, well, if you take a larger screenshot and with an open inspector, then I can probably help with changing the internal structure, as I don’t understand yet where this lacuna comes from. - Stanislav Belichenko
  • one
    I just fixed everything, and the files are automatically uploaded to the server. I understood all the mistakes, I will think about the correct decision. Thank you :) - VladislavMSK

In the layout to which you gave the link and the image in the topic - this is not a problem of the responsive image of the bootstrap. In the link to the site you apply the background color to the bootstrap column .col- - forming a grid. You have this style:

 .ijh { background-color: rgb(235, 235, 235); }

You do not need to do this, since there are paddings in the column that have indentation backwards due to the parent .row

To apply a background image or color inside a column, apply a style to the internal div.

 <div class="container"> <div class="row"> <div class="col-12 ijh"> не правильно </div> <div class="col-12"> <div class="ijh"> правильно </div> </div> </div> </div>
  • one
    He does not need to place this class anywhere else, since within this line it has blocks with the class m_mid_tpl , which sets the background for all four internal blocks. You just need to delete the class ijh , as I already wrote in my answer a little earlier than you ru.stackoverflow.com/a/624949/218094 - Stanislav Belichenko
  • @kizoso, in my opinion, now I will test and accomplish the goal. - VladislavMSK
  • @kizoso, your method leads to the same result as the Stanislav variant. I gave the answer under his post. - VladislavMSK

So that the image does not go beyond the block, set it to max-width;

 img { max-width: 100%; }

    The picture in div [ body > div > div:nth-child(3) > div ], it has three classes ( col-lg-12 , col-sm-12 , col-xs-12 ), in which it is written:

     padding-right: 15px; padding-left: 15px;

    Drop them off the div container.

    • I will try to enclose a picture in a div and set negative indents. - VladislavMSK
    • @ VladislavMSK, why? Just remove the padding from this div . - user207618
    • Thanks, it works, but I found a better way :) - VladislavMSK
    • @ VladislavMSK, OK, please. - user207618

    If the image goes outside the block, you need to give the parent block the property:

     overflow: hidden;