Shulou(Shulou.com)06/03 Report--

This article is about how to quickly solve the problem of picture overflow div, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

A front-end page was written two days ago, which shows that everything is normal on this machine. However, in the continuous testing, found a serious problem, if the picture is too large, it will break the div overflow. And because the page is an adaptive page, the display with different resolutions will make corresponding div width adjustment, so even if the picture is not large, it will overflow due to different resolutions.

Here is a summary of the solution.

First, let's do a simple css layout:

XML/HTML Code copies content to the clipboard

Solution for div image overflow # div_home {width:80%; margin: 0 auto;} # div_left {width:70%; height: 800px; float:left; padding: 20px;} # div_right {width: 15%; float: right; height: 800px; padding: 20px;}

Let's insert a picture with a size larger than div.

Let's see how it works:

The image here is too large and overflows the div. Here's a look at the solution:

Solution one

Style the picture in css, setting the maximum width to less than the width of its parent div

Img {max-width: 730px;}

However, for screens with different resolutions, there will also be the problem of overflow.

First, let's take a look at the image display at the resolution of 1366 to 728 (local resolution):

Seems to have solved the problem, let's adjust the resolution to 10240768 to see the effect:

The picture is still overflowing, and the experience must be very unfriendly for a screen of this resolution.

Then, to solve the problem of overflow, you can add another method:

Solution two

Do not show the overflow:

Overflow: hidden

This code is added under div_left:

CSS Code copies content to the clipboard

# div_left {width:70%; height: 800px; float:left; padding: 20px; overflow: hidden;}

Obviously, the disadvantage of this method is that the picture cannot be fully displayed, so let's try it:

Although the problem of overflow is solved, the display effect is not friendly, and if the hidden part happens to have important information, then such a design is unreasonable.

Final solution

To solve the problem of image overflow div, while the picture can be fully displayed, but also compatible with different resolutions of these three conditions, here with a JavaScript code to solve.

The idea is to get the width of the div and then set the width of the picture dynamically. It's as simple as that.

Before typing the code, delete the overflow:hidden; code, which is a "make do with" approach that we should abandon.

JavaScript Code copies content to the clipboard

_ window.onload = function () {var getEle = document.getElementsByTagName ("img"); var getEle_divLeft = document.getElementById ("div_left"); for (var iTuno; I

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.