div (부트 스트랩)에 맞게 조정 및 이미지 크기

div (부트 스트랩)에 맞게 조정 및 이미지 크기

---

특정 크기 div에 맞는 이미지를 얻으려고합니다. 불행히도 이미지는이를 따르지 않고 대신 충분히 크지 않은 크기로 비례하여 축소됩니다. 이미지를 내부에 맞추는 가장 좋은 방법이 무엇인지 잘 모르겠습니다.

이 코드가 충분하지 않다면 더 많은 것을 제공 할 수 있고 내가 간과하고있는 다른 오류를 수정할 수 있습니다.

다음은 HTML입니다.

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

내 CSS

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}

---

이미지 width및 height이미지를 명시 적으로 정의 할 수 있지만 결과가 가장 잘 보이지 않을 수 있습니다.

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

---

... 당신의 의견에 따라, 당신은 또한 단지를 막지 수 overflow- 볼 이 예제를 높이 제한 이미지를보고 너무 넓은 때문에 잘라.

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

---

이 방법을 시도하십시오.

<div class="container"><div class="col-md-4" style="padding-left: 0px;  padding-right: 0px;">
        <img src="images/food1.jpg" class="img-responsive">
    </div>
</div>

최신 정보:

In Bootstrap 4 img-responsive becomes img-fluid, so the solution using Bootstrap 4 is:

<div class="container"><div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>

---

Just a heads up that Bootstrap 4 now uses img-fluid instead of img-responsive, so double check which version you're using if you're having problems.

---

Simply add the class img-responsive to your img tag, it is applicable in bootstrap 3 onward!

---

I had this same problem and stumbled upon the following simple solution. Just add a bit of padding to the image and it resizes itself to fit within the div.

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

---

I used this and works for me.

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

---

Most of the time,bootstrap project uses jQuery, so you can use jQuery.

Just get the width and height of parent with JQuery.offsetHeight() and JQuery.offsetWidth(), and set them to the child element with JQuery.width() and JQuery.height().

If you want to make it responsive, repeat the above steps in the $(window).resize(func), as well.

---

If any of you looking for Bootstrap-4. Here it is

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

참고URL : https://stackoverflow.com/questions/16466240/adjusting-and-image-size-to-fit-a-div-bootstrap