HTML의 이미지 크기 조정 문제에 대한 솔루션

타사 인터페이스에서 이미지를 얻었습니다. 내 페이지에 이미지를 삽입했을 때 이미지가 너무 큰 것을 발견했습니다. div의 크기를 직접 조정할 수 없으며 이미지의 크기는 여전히 동일합니다. 이미지 표시 크기를 조정할 수 있는 방법이 있나요?

사진은 동적으로 가져오므로 페이지를 새로 고치면 새 사진을 얻을 수 있습니다. 따라서 이미지를 다시 자르면 문제가 해결되지 않습니다.

html 소스 코드는 다음과 같습니다

<div class="row">
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <img  src="http://abc.jpeg"></img>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <img src="http://abc.jpeg"></img>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-primary">
                    <img src="http://abc.jpeg"></img>
                </div>
            </div>
        </div>

부트스트랩의 이미지 자체 응답 클래스

<img class="img-responsive" src="http://abc.jpeg" />

를 시도해 볼 수 있습니다. 그래도 문제가 해결되지 않으면 위에서 언급한 방법으로 입력하고 너비와 높이를 제한할 수 있습니다. it

<img style="width=100px; height=100px" src="http://abc.jpeg" />

css Write

 .panel img{ width:你期望的宽; height:你期望的高}

div의 크기를 조정하는 것이 아니라 img 태그의 크기를 조정해야 합니다.

다른 사람의 사진을 받고 있다는 것은 사진의 길이와 너비가 확인되지 않았다는 뜻이며, 크기도 불확실하다는 의미입니다. img를 사용하여 길이와 너비를 제한하면 문제가 발생합니다.

가장 좋은 방법은

.panel img{max-width:100%;max-height:100%;}

동안 .panel의 길이와 너비를 조정하는 것입니다.

위 내용은 HTML의 이미지 크기 조정 문제에 대한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!