After using Baidu Map API, the large picture on the homepage will burst the div in the mobile browser_html/css

After using Baidu Map API, the large picture on the homepage will burst the div in the mobile browser_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:58:47

Original

1213 people have browsed it

The reason is this
I was working on a company website these days and wanted to make a domineering map, so I thought of Baidu API
Then I went to the website and found the code. Unfortunately, the maximum width can only be 567px
But this is not suitable for For code experts, this is not a problem at all. Newbies like me also know how to change the source code
So I changed the width to 100%

Then the code for the first picture is like this

.top {	height:100vh;	width:100%;	background:url(../images/background-1.jpg) no-repeat center top;	background-size:cover;}

Copy after login

<section class="top">...</section>

Copy after login

I think there is no problem
Then I tested it in the browser
This is what the browser looks like

It’s not bad

Then the same thing happens when the browser width is reduced
I haven’t written the 320px adaptive code yet, so it’s very messy. But that’s not the point

But it will become a mobile browser That’s it! ! ! (I'm using ios7)

I'm really fainted. This picture burst the DIV perfectly and overflowed several pages
How can this give people Good experience

Delete the JS code of Baidu API and this problem will disappear
So it must be related to this code of Baidu
But with my strength
I can’t find it. come out. . . . Crying

Please help me take a look
I am giving you the server address because the domain name has not been resolved yet. . .
Just take a look http://121.40.157.215

If you know the problem, you can kindly tell me directly
If you don’t know the problem, you can suggest a method and I will test it

But I’m really a novice. I’m not very good at writing HTML and CSS.
So I really can’t do the part of checking the JS code

Thank you

Reply to the discussion (solution)

1. Method 1 to prevent the image from breaking the DIV - TOP

The original processing method is to process the image to be displayed. For example, if your DIV width is 500px (pixels), then the width of the image you upload or place on the webpage must be less than 500px. That is to say, your image needs to be cut by image software and scaled down before uploading and placing it on the webpage. Solve the problem of broken and opened DIV.

It is common for many large picture sites and news sites to edit photos and images to adapt to the width of the web page.
2. Method 2 to prevent pictures from stretching the DIV - TOP

If you do not use the photo processing method to adapt to the limited width of the DIV, you can set the Hide Exceeding Content method on the DIV. You only need to set the width of the DIV and then add the CSS style "overflow:hidden" to solve the problem of the hidden image being too wide than the DIV and the problem of bursting the DIV.
3. Solution 3 - TOP

Just add the width to the image img tag to solve the problem. This can reduce the image proportionally without affecting the image quality.

For example, if your webpage DIV width is 500px, then you can set the width of the img tag to less than 500 after uploading the image.
This can solve the problem that the DIV SPAN is burst due to the picture being too wide. This has the advantage that the picture can be enlarged and reduced in equal proportions.
4. CSS method to solve the burst problem 4 - TOP

This method uses CSS to directly set the width of the img in the div. The bad thing about this is that if the image is too small, it will affect the effect of browsing the image on the web page.

Div structure:

Corresponding CSS code: .divcss5 img{width: width value unit}
5. CSS method to solve the problem of broken images and DIVs - TOP

Use max-width (maximum width). For example, if your DIV width is 500px, then you should add the maximum width CSS style "max" corresponding to the DIV style. -width="500px"" can be solved, but this attribute is not compatible with IE6 browsers.
6. Summary and recommendations of methods to solve the problem of pictures breaking the DIV layer - TOP

1), maximum width ( max-width) overflow:hidden. Our setting like this allows browsers of IE6 and above to support the maximum width style, and also allows the hidden image under IE6 to exceed the width and expand the DIV. This method is more convenient and practical.

2). Only use the overflow:hidden attribute, as in method two

3) The image is processed by the software when uploading to adapt to the DIV layout width, as in method one

The above is the recommended method to solve the problem of IMG pictures breaking through the limited DIV width. According to the actual situation, you can choose the method that suits you to solve the problem of pictures breaking through the DIV layer in the web page.

1. Method 1 to prevent pictures from breaking the DIV - TOP

I tried overflow:hidden to no avail

The attributes I set for this DIV are
width:100%
height:100vh
The value in the background is cover

Will not burst in PC browser