Final Solution for image overflow div problem, overflow div Solution
I wrote a front-end page two days ago, and everything is normal on the local machine. However, during continuous testing, we found a serious problem. If the picture is too large, it will break through the div overflow. Since the page is an adaptive page, the corresponding div width is adjusted for the display with different resolutions, so even if the image is not large, it will overflow due to different resolutions.
Here we will discuss and summarize the solution.
First, let's make a simple css layout:
<Html>
<Head> <meta charset = "UTF-8"/> <title> div image overflow solution </title> <style type = "text/css"> # 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 ;} </style> <script type = "text/javascript"> </script>
Next we will insert an image larger than div
To see the effect:
The image here is too large to overflow the div. Here we will discuss the solution:Solution 1
Set the image style in css and set the maximum width to a width smaller than that of its parent div.
img { max-width: 730px;}However, for screens with different resolutions, overflow may occur.
First, let's take a look at the image display in the 1366*728 resolution (local resolution:
It seems that the problem has been solved. We adjusted the resolution to 1024*768 to see the effect:Solution 2
The image still overflows. The screen with this resolution must have a unfriendly experience.
To solve the problem of overflow, you can add another method:Do not show the overflow part:
overflow: hidden;
This code is added below div_left:#div_left { width:70%; height: 800px; float:left; padding: 20px; overflow: hidden;}
Obviously, the disadvantage of this method is that the image cannot be fully displayed. Let's try:Final Solution
Although the problem of overflow is solved, the display effect is unfriendly. If the hidden part has important information, this design is unreasonable.To solve the problem of image overflow div, while the image can be fully displayed, it must be compatible with the three conditions of different resolutions. Here we use a piece of JavaScript code to solve this problem.
The idea is to obtain the div width and dynamically set the image width, which is so simple.
Before coding, we should delete the overflow: hidden; code. We should discard this "will" approach.Window. onload = function () {var getEle = document. getElementsByTagName ("img"); var getEle_divLeft = document. getElementById ("div_left"); for (var I = 0; I <getEle. length; I ++) {getEle [I]. style ["max-width"] = getEle_divLeft.offsetWidth-40 + "px"; // here-40 is the left and right width of padding and }}
Effects on 1028*768 screens:
Effect in 1366*768:
Possible bugs and SolutionsWhen loading some Divs, the image width is increased, and the layout changes to a smaller value due to the floating layout. Because the image gets the div width at the beginning, so his width remains unchanged.
Here is a conservative solution:
In css, set the image attribute to none, not to be displayed. When loading javascript code, set the width and height, and then display:img { max-width: 730px; display: none;}
Add the display image code after JavaScript:
getEle[i].style["display"] = "inline";
Location in the Code:Window. onload = function () {var getEle = document. getElementsByTagName ("img"); var getEle_divLeft = document. getElementById ("div_left"); for (var I = 0; I <getEle. length; I ++) {getEle [I]. style ["max-width"] = getEle_divLeft.offsetWidth-40 + "px"; // here-40 is the left and right width of padding and getEle [I]. style ["display"] = "inline ";}}
In this way, the problem of the Image Display overflow div is solved and the above three conditions are met.
Complete code:<Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
