The same style and the same percentage can be used to control the height of the img under Android, but why can't it be done under iOS? _html/css_WEB-ITnose

img has display:block in advance. Using px control, both Android and ios are normal. Using percentage, Android is normal, iOS is deformed, and the parent div will be enlarged. I removed the height of the img, and the height of the img will adapt to the parent div, which is available on both Android and iOS.
Can anyone tell me why this is? ?

Reply to discussion (solution)

.img-responsive { display: block; max-width: 100%; height: auto; }


Will this still cause problems? Just copy it and try it.

.img-responsive { display: block; max-width: 100%; height: auto; }


Will this still cause problems? Just copy it and try it.

Do you want the height to be adaptive? That doesn't work, I've tried it.

Since you are on a mobile device
then use a div to set the background image to handle stretching and deformation

Since you are on a mobile device
then use a div to set the background image To deal with the stretch deformation

I removed the percentage of the img. It will automatically adapt to the height of the parent div. I have removed it.

What I want to know most is why the height cannot be controlled using percentage. It is completely impossible under ios, and px can be used anywhere.
----------------------------------------------- -------------------------------------------------- ------

.img-responsive { display: block; max-width: 100%; height: auto; }

< img class="img-responsive" src=...

Will this still cause problems? Just copy it and try it.

Do you want the height to be adaptive? That doesn't work, I've tried it.

This is feasible, the width is adaptive! Dynamically adjust the height beyond the module you want overflow:hidden;

.img-responsive { display: block; max-width: 100%; height : auto; }


Will this still cause problems? Just copy it and try it.

Do you want the height to be adaptive? That doesn't work, I've tried it.

This is feasible, the width is adaptive! The height is dynamically adjusted, if it exceeds the module you want overflow:hidden;
If it is not exceeded, there is no height at all. . . *{overflow: hidden;} has been used,
should be added?

max-width:100%;

img has been displayed:block in advance. Using px control, both Android and ios are normal. Using percentage, Android is normal, iOS is deformed, and the parent div will be enlarged. I removed the height of the img, and the height of the img will adapt to the parent div, which is available on both Android and iOS.
Can anyone tell me why this is? ?

Post the problematic code directly

.img-responsive { display: block; max-width: 100%; height: auto; }


Will this still cause problems? Just copy it and try it.

Do you want the height to be adaptive? That doesn't work, I've tried it.

This is feasible, the width is adaptive! The height is dynamically adjusted, if it exceeds the module you want overflow:hidden;
If it is not exceeded, there is no height at all. . . *{overflow:hidden;} has been used, and
should be added?


In view of *{overflow: hidden;} this kind of code, I think the author has little understanding of the web field!
So I will go directly to a small demo I made,
http://qianjia.com/demo/co.special
You can adjust the browser size on firefox and then use firebug to look at the code. .
No matter how much you say, it won’t help. I suggest that after understanding the basic knowledge of w3school, the author should dabble in more front-end knowledge.

.img-responsive { display: block; max-width: 100%; height: auto; }


Will this still cause problems? Just copy it and try it.

Do you want the height to be adaptive? That doesn't work, I've tried it.

This is feasible, the width is adaptive! The height is dynamically adjusted, if it exceeds the module you want overflow:hidden;
If it is not exceeded, there is no height at all. . . *{overflow:hidden;} has been used, and
should be added?


In view of *{overflow: hidden;} this kind of code, I think the author has little understanding of the web field!
So I will go directly to a small demo I made,
http://qianjia.com/demo/co.special
You can adjust the browser size on firefox and see the code, and then use firebug to look at the code. .
No matter how much you say, it won’t help. I suggest that the poster should dabble in more front-end knowledge after understanding the basic knowledge on w3school.


On the mobile phone, the company uses myeclipse to develop the web page and it cannot be adjusted

I have another question to ask you

I am currently using jquery mobile. Regarding web development on mobile phones, the only information available now is from W3C and various fragments from Baidu. Is there any systematic information that I can study?

.img-responsive { display: block; max- width: 100%; height: auto; }


Will this still cause problems? Just copy it and try it.

Do you want the height to be adaptive? That doesn't work, I've tried it.

This is feasible, the width is adaptive! The height is dynamically adjusted, if it exceeds the module you want overflow:hidden;
If it is not exceeded, there is no height at all. . . *{overflow: hidden;} has been used,
should be added?


In view of *{overflow: hidden;} this kind of code, I think the author has little understanding of the web field!
So I will go directly to a small demo I made,
http://qianjia.com/demo/co.special
You can adjust the browser size on firefox and see the code, and then use firebug to look at the code. .
No matter how much you say, it won’t help. I suggest that the poster should dabble in more front-end knowledge after understanding the basic knowledge on w3school.


On the mobile phone, the company uses myeclipse to develop web pages, and it cannot be adjusted

firefox firebug This is the most basic web development and testing tool,
If it is For mobile phones, it is recommended to use: chrome plug-in Responsive Web Design Tester,

.img-responsive { display: block; max-width: 100%; height: auto; }


Will this still cause problems? Just copy it and try it.

Do you want the height to be adaptive? That doesn't work, I've tried it.

This is feasible, the width is adaptive! The height is dynamically adjusted, if it exceeds the module you want overflow:hidden;
If it is not exceeded, there is no height at all. . . *{overflow: hidden;} has been used,
should be added?


In view of *{overflow: hidden;} this kind of code, I think the author has little understanding of the web field!
So I will go directly to a small demo I made,
http://qianjia.com/demo/co.special
You can adjust the browser size on firefox and then use firebug to look at the code. .
No matter how much you say, it won’t help. I suggest that the poster should dabble in more front-end knowledge after understanding the basic knowledge on w3school.


For the mobile version, the company uses myeclipse to develop web pages, and it cannot be adjusted

firefox firebug is the most basic web development and testing tool.
If it is on mobile phone, it is recommended to use: chrome plug-in Responsive Web Design Tester,




I can use firebug. I just used the mobile version, thank you for your advice