Вопросы Теги

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

Я попробовал поискать в 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>
23
задан Richard 5 October 2011 в 15:37
поделиться

1 ответ

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

2
ответ дан 29 November 2019 в 00:51
поделиться