Изображение загадочно игнорирует max-width в Firefox и IE

Итак, я пытаюсь отображать изображения как можно больше, без обрезки на любом размере экрана. Это означает height: 100%; width: auto в landscape и width: 100%; height: auto в portrait.

Я обслуживаю изображения, которые достаточно велики, чтобы заполнять iPads сетчатки, поэтому почти каждый размер экрана будет масштабировать изображения вниз. Он делает это хорошо в каждом браузере и ориентации, кроме Internet Explorer и Firefox, в ландшафтном режиме, оставляя их слишком большими для почти каждого экрана. Это только в ландшафте, заметьте.

Соответствующие биты кода:

<style type="text/css">

            #container {position:absolute; top:0; left: 0; right: 0; bottom:0; display: block;}

            #content {
              text-align: center;
              margin: 0px;
                font-size:0;
                 position: absolute;
                top:0; left: 0; right: 0; bottom: 0
            }

            #content:before {
              content: '';
              display: inline-block;
              height: 100%; 
              vertical-align: middle;
              margin-right: -0.25em; 
             }

            .sponsor {
              display: inline-block;
              vertical-align: middle;
             }

             #content img {
                max-width: 100%;
                width: 100%;
                height:auto;
            } 
@media all and (orientation: landscape) {
                 #main {        
                    top:0;
                    display: block;  
                    width: 100%;
                    height: 100%;                       
                    margin:0px auto; 
                    text-align:center;
                     }

                    #content img {
                                height:100%;
                                width:auto;
                                max-width:auto !important;
                                max-height:100%;
                                display:block;
                                margin:0 auto;
                }

}
</style>

<div  id="content"> 
 <?php if (has_post_thumbnail( $post->ID ) ): ?>
 <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>              
         <div title="Click to flip" class="sponsor">

                 <a href="#" class="img-link"> 
                        <img src="<?php echo $image[0]; ?>" alt="" class="feat-1" style="display: block;" />
                    </a>

                     <a href="#"> 
                      <img src="<?php echo kd_mfi_get_featured_image_url('featured-image-2', 'post', 'full'); ?>" alt="" class="feat-2" style="display: none;" />
                    </a>

            </div><?php endif; ?>
</div><!-- End div #content -->

Я не слишком беспокоюсь о чем-то старше IE9, но в идеале хотел бы обслуживать все. Однако, пока я могу обслуживать IE9 + и Firefox, я буду счастлив.

О, и, кстати, инспектор в Firefox говорит мне, что соблюдается правило width:100%, но это явно не так.

Большое спасибо заранее!

Ответ 1

У вас max-width: 100%, но 100% чего? Из родительской ширины, правильно? Но родитель является встроенным блоком (с class= "спонсором" ), ширина которого не установлена, поэтому его ширина зависит от детей и, в частности, от предпочтительной ширины дочерних элементов.

Макет этого стиля undefined в спецификации CSS. В частности, внутренняя ширина детей в этом случае зависит от ширины родителя, которая, в свою очередь, зависит от внутренней ширины детей. См. http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float для соответствующего текста спецификации и отметьте все бит "не определяет".

Я рекомендую указать ширину <div class="sponsor">. Думаю, это должно решить проблему.

Ответ 2

Мое исправление было в два раза. Он работал, когда никаких других предложений не было. Он использует таргетинг только для FF, более старого исправления width: 100% и дополнительного экспериментального свойства.

Чтобы заставить его работать, я сделал следующее:

@-moz-document url-prefix() {
    /* Firefox doesn't respect max-width in certain situations */
    img { width: 100%; max-width: -moz-max-content; }
}

Волшебная пуля была экспериментальным значением -moz-max-content. В сочетании с width: 100% он приводит к тому, что FF ведет себя как настройка Safari/Chrome max-width: 100%;.

Я нашел это из следующего источника:

http://ss64.com/css/max-width.html