div를 늘리기 위한 이미지 가져오기

StackOverflow https://stackoverflow.com/questions/41198

  •  09-06-2019
  •  | 
  •  

문제

이미지의 높이를 늘리려면 어떻게 해야 합니까? DIV 수업?

현재는 다음과 같습니다.

하지만 이미지가 제대로 맞도록 DIV를 늘려야 하는데 이미지 크기를 조정하고 싶지는 않습니다.

다음은 DIV용 CSS입니다(회색 상자).

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
}

이미지에 적용되는 CSS:

.product{
    display: inline;
    float: left;
}

그렇다면 이 문제를 어떻게 해결할 수 있나요?

도움이 되었습니까?

해결책

추가하다 overflow:auto; 에게 .product1

다른 팁

이미지 뒤의 마크업에 다음과 같은 내용을 삽입하세요. <div style="clear:left"/>.조금 지저분하지만 내가 찾은 가장 쉬운 방법입니다.

그리고 그 동안 해당 이미지에 약간의 여백을 두어 텍스트가 이미지와 부딪히지 않도록 하세요.

@John Millikin이 정확하다고 가정하면 코드는

.product + * { clear: left; }

div 뒤의 코드를 수동으로 조정하지 않고도 동일한 작업을 수행하는 것으로 충분합니다.

사용할 수 있는 한 가지 비결은 <div>의 오버플로 속성을 숨김으로 설정했습니다.이렇게 하면 브라우저가 상자의 물리적 크기를 계산하고 떠 있는 이미지의 이상한 겹침 문제를 해결합니다.추가 HTML 마크업을 추가하지 않아도 됩니다.

수업의 모습은 다음과 같습니다.

.product1 {
    width: 100%;
    padding: 5px;
    margin: 0px 0px 15px -5px;
    background: #ADA19A;
    color: #000000;
    min-height: 100px;
    overflow: hidden;
}

이건 직업인 것 같아 클리어픽스 나에게 ...

다음을 시도해 보세요:

.Strech
{
    background:url(image.jpg);
    background-size:100% 100%;
    background-repeat:no-repeat;

    width:500px;
    height:500px;
}

display:inline  
float:left

네 문제야?

플로팅을 사용하면 상위 너비가 자식에 의해 늘어나지 않습니다. 플로트 없이 이미지를 배치해 보세요.플로트를 떼어내면 원하는 효과를 얻을 수 있습니다.
또 다른 접근 방식은 범위 크립이 발생하지 않도록 상위 요소의 끝에서 부동 소수점을 지우는 것입니다.

업데이트: 링크를 본 후 표시되는 높이 문제는 수레가 제거되지 않았기 때문입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top