Как автоматически изменить размер изображения для мобильного сайта? - PullRequest
Новая
       1

Как автоматически изменить размер изображения для мобильного сайта?

22 голосов
/ 05 октября 2011

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

CSS: 

img.test {
    width: 100%;
    height: auto;
}

HTML: 

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;   user-scalable=0;" name="viewport">
        <link rel="stylesheet" href="../includes/style.css">
    </head>
    <img class="test"  src="../includes/foo.jpg">

Но изображение все еще загружается с исходным масштабированием.Я новичок в css и html, поэтому любая помощь будет отличной!

Редактировать:

Спасибо за ответы.Вот пересмотренная версия, которая сейчас работает.

HTML: 

   <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;  user-scalable=0;" name="viewport">
        <link rel="stylesheet" href="../includes/style.css">
    </head>
    <body width = "device-width">
        <img class="test"  src="../includes/buoy_map.jpg">
    </body>

Ответы [ 5 ]

43 голосов
/ 05 октября 2011 
img {
  max-width: 100%;
}

Следует установить, чтобы изображение занимало 100% содержащего его элемента.

17 голосов
/ 28 августа 2013 
img
{
    max-width: 100%;
    min-width: 300px;
    height: auto;
}
7 голосов
/ 04 мая 2017

, если вы используете bootstrap 3 , просто добавьте img-отзывчивый класс в ваш тег img 

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

, если вы используете bootstrap 4 , добавьте img-Fluid класс в ваш тег img 

<img class="img-fluid"  src="...">

, который делает кадры: max-width: 100%, height: auto и display: block to the image

3 голосов
/ 05 октября 2011

Ваш css с не имеет никакого эффекта, так как внешний элемент не имеет определенной ширины (и тело также отсутствует).

Другой подход заключается в доставке уже масштабированных изображений. http://www.sencha.com/products/io/ например, доставляет уже уменьшенное изображение в зависимости от устройства просмотра.

2 голосов
/ 13 октября 2014

Для меня лучше всего было добавить это в изображение css: max-width:100%; и НЕ указывать ширину и высоту изображения в параметрах html. Это отрегулировало ширину, чтобы соответствовать экрану устройства, регулируя высоту автоматически. В противном случае высота может быть искажена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...