Why does the iphone not honor max-width: 100%?-CodePudding

In my web browser if squeezed and my Android phone 100% works perfectly. Not so on iphones checked.

For images I commonly use max-width: 100%; and when the situation suits width: 100%; or img-responsive. The image is larger than 600px wide; thus I set width to 600px to control that on larger devices.

<section class='section20'>
<figure >
<img src="images/user-content/1/20221003160546.jpg">
</figure>
</section>

The CSS:

.section20 .image,
.section20 img {
width: 600px !important;
max-width: 100% !important;
}

Adding !important or not makes no difference. The formatting editor is CKEditor 5. It is rather strick in how the classes are handled in the code. If you add your custom class in code view it will strip it out of figure when return to formatting editor view.

<figure >
<figure >

custom-class would get stripped out.

CodePudding user response：

Check your selectors.

Using .section20 .image is instructing the img wrapper to stay at 600px and won't resize with max-width: 100%;.

Use .image img instead.

.image img {
  width: 600px;
  max-width: 100%;
}

<section class='section20'>
  <figure >
    <img src="https://dummyimage.com/600x400/000/fff">
  </figure>
</section>

CodePudding user response：

Do not hardcode widths and heights. Go for rem or vw/vh(recommended).

.section20 .image,
.section20 img {
width: 35rem ; // or type the equivalent rem value
max-width: 100vh ; 
}

means the height of this element is equal to 100% of the viewport height.