Solution to image resizing problem in html

I obtained a picture from a third-party interface. When I embedded the image into my page, I found that the image was too large. Directly resizing the div doesn't work, the image is still the same size. Is there any way to adjust the size of the image display?

The picture is obtained dynamically, which means that refreshing the page will get a new picture. So re-cropping the image won't solve the problem.

The html source code is as follows

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

You can try bootstrap’s image self-responsive class

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

. If you still can’t solve the problem, you can only follow the instructions mentioned above. , add width and height to limit the

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

Write

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

in the css. You should not adjust the size of the div, but the size of the img tag.

If you are getting someone else's picture, it means that the length and width of the picture are not confirmed, and the size is also uncertain. If you use img to limit the length and width, you will be in trouble.

The best way is to adjust the length and width of .panel while

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

The above is the detailed content of Solution to image resizing problem in html. For more information, please follow other related articles on the PHP Chinese website!