Адаптивное изображение в адаптивном Div или таблице

0

Я хочу сделать свой сайт отзывчивым. При доступе к сайту со своим смартфоном наш логотип должен быть наверху и должен иметь всю ширину экрана телефона. Я попробовал это:

.image {
      background-image: url("imageurl.jpg");
     background-size: contain;
     background-repeat:no-repeat;
     max-width:100pc;
     max-height:auto;
}

Проблема в том, что вам нужно определить размер для div или td, в котором находится изображение. Я не знаю размер, потому что размер экранов будет отличаться. Нужен ли мне div или td, который реагирует и меняет свой размер?

Есть идеи?

  • 1
    Вы можете попробовать установить ширину на 100%
Теги:
image
responsive-design

6 ответов

-1
Лучший ответ

Для отзывчивого изображения в таблице DEMO

table { 
    border-collapse: collapse; 
    width: 100% 
}

td { 
    border: 1px solid #000; 
}

img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */
}

Для отзывчивого изображения в div DEMO

.image{
  width:100%;
  height:20em; // your height 100%, or fixed
  display:block;
  background:url('yourpath/image.jpg')no-repeat center center;nd-size:cover; 
}
Поделиться
  • 0
    Спасибо! Это очень хорошее начало! тд теперь изменяет размеры по горизонтали! Хотя есть еще одна проблема: я хочу, чтобы логотип всегда был виден целиком. Размер должен изменяться по вертикали автоматически. Имейте в виду, что я хочу, чтобы все увидели логотип целиком, независимо от размера экрана мобильного устройства.
0

Спасибо за все быстрые ответы. Я объединил два предложенных подхода, как показано в коде. Теперь таблица и img изменяются в зависимости от размера экрана.

Однако есть еще одна проблема: img отображается на нем по всей длине, но не на высоте! Я бы хотел, чтобы img всегда был полностью замечен.

    <style>
table { 
    border-collapse: collapse; 
    width: 100% 
}

td { 
    border: 1px solid #000;
    background-image:url("http://www.s4ea.org/images/logor.jpg");
    background-repeat: no-repeat;

     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     width: 100%;
     height:100%;

}




</style>
<body>
<table>
    <tr>
        <td>image</td>
    </tr>
</table>
</body>
</html>

Благодарю!

Поделиться
0

Надеюсь это поможет

.images{
       background-size:100% auto;   
       //here 100% is for width and auto is height(for self adjusting according to width )
       max-width:A px;   //where A is the actual width of image 
}
Поделиться
  • 0
    Я использую это обычно. Просьба взглянуть на комментарий Андрея, который предположил примерно то же самое.
0

Установите width (не max-width) на 100% и используйте height:auto, чтобы масштабировать различные размеры.

Поделиться
0

Пытаться:

.image {
     background: url(images.jpg) no-repeat center center;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
     width: 100%;
     height:100%;
}
Поделиться
  • 0
    Спасибо за быстрый ответ! Я совместил твой подход с Гауравами. Хорошее начало, но все же одна вещь, которая не работает: автоматическое изменение размера по высоте! Я хочу, чтобы изображение было видно целиком, независимо от его ширины.
0

Не используйте фоновое изображение. Используйте <img>. Установите max-width: 100%; на ваш элемент img.

Поделиться
  • 0
    Также @Misa, я обычно использую этот подход, но на этот раз он не сработал. Я хочу, чтобы размер div или таблицы изменялся в зависимости от экрана, как это делал Гаурав. Вместе с Gadgetster кстати он работает практически нормально. Img и Div меняются, но я не вижу весь IMG! Только его длина. Что мне нужно сделать, чтобы img тоже был полностью виден по высоте?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню