сделать изображение отзывчивым - самый простой способ

<p>я уже некоторое время ищу решение этой проблемы, но безуспешно. </p><p>я замечаю, что мой код реагирует на то, что если я уменьшу его до размера телефона или планшета - весь текст, ссылки и значки социальных сетей соответственно масштабируются.</p><p>однако, единственная вещь, которая не делает, является моим изображением в теле; который заключен в теги абзаца ... с учетом сказанного, есть ли простой способ сделать изображение также адаптивным?</p><p>спасибо! </p><p>вот код, который я использовал для отображения своего изображения в теле:</p><pre><code></body> </center> <p><a href="my website link" target="\_blank"><img src="image link" border="0" alt="null"></a></p> </center> </body> </code></pre>

<p>вы можете попробовать сделать</p><pre><code><p> <a href="my website link" target="\_blank"> <img src="image link" style='width:100%;' border="0" alt="null"> </a> </p> </code></pre><p>это должно масштабировать ваше изображение, если в жидкой макете.</p><p>для отзывчивости (т.е. ваш макет реагирует на размер окна) вы можете добавить класс к изображению и использовать запросы <code>@media</code> в css для изменения ширины изображения.</p><p>обратите внимание, что изменение высоты изображения испортит соотношение </p>

<p>ширина: 100% сломает его, когда вы посмотрите на более широкие.</p><p>следующее - img-отзывчивый bootstrap</p><pre><code>max-width: 100%; display:block; height: auto; </code></pre>

<p>я также рекомендовал бы использовать все свойства css в файле, отличном от файла html, чтобы вы могли лучше организовать свой код.</p><p>поэтому, чтобы сделать ваш img отзывчивым, я бы сделал следующее:</p><p>сначала назовите свой тег <code><img></code>, используя атрибут <code>class</code> или <code>id</code> в своем html-файле:</p><pre><code><img src="image link" border="0" class="responsive-image" alt="null"> </code></pre><p>затем в моем файле css я внесу изменения, чтобы сделать его отзывчивым:</p><pre><code>.responsive-image { height: auto; width: 100%; } </code></pre>

<p>я использую эту технику, чтобы сделать логотип таким же отзывчивым для мобильных устройств, как и простой способ. логотип изменится автоматически.</p><p><strong>html</strong> </p><pre><code><div id="logo\_wrapper"> <a href="http://example.com" target="\_blank"> <img src="http://example.com/image.jpg" border="0" alt="logo" /> </a> </div> </code></pre><p><strong>css</strong> </p><pre><code>#logo\_wrapper img { max-width: 100%; height: auto; } </code></pre><p>надеюсь, это поможет.</p><p>спасибо</p>

<p>чтобы сделать все изображения на вашем сайте отзывчивыми, не меняйте встроенный html-код с правильной разметки, так как ширина: 100% работает не во всех браузерах и вызывает проблемы в firefox. что вы хотите сделать, это разместить ваши изображения на вашем сайте, как вы обычно должны:</p><pre><code><img src="image.jpg" width="1200px" height="600px" /> </code></pre><p>и затем добавьте к вашему css, что максимальная ширина любого изображения составляет 100% с высотой, установленной на auto:</p><pre><code>img { max-width: 100%; height: auto; } </code></pre><p>таким образом, ваш код работает во всех браузерах. он также будет работать с пользовательскими клиентами cms (например, cushy cms), которым требуется, чтобы изображения имели фактический размер изображения, закодированный во встроенный html, и на самом деле это проще, когда все, что вам нужно сделать, чтобы сделать изображения отзывчивыми, это просто указать в вашем css файл, в котором максимальная ширина равна 100%, а для высоты задано значение auto. не забывайте высоту: авто или ваши изображения не будут правильно масштабироваться.</p>

<h2>я использую это все время</h2><p>вы можете настроить класс img и свойство max-width.</p><pre><code>img{ width: 100%; max-width: 800px; } </code></pre><p>max-width - это imp, иначе изображение будет слишком масштабным для рабочего стола. не нужно указывать свойство height, потому что по умолчанию это автоматический режим.</p>

<p>два года опаздывают на этот пост, но ... вы ограничены использованием тега <code><img></code>? </p><p>я обнаружил, что намного проще установить <code><div></code> <em>или любой другой элемент по вашему выбору</em> с помощью <code>background-image</code>, <code>width: 100%</code> и <code>background-size: 100%</code>. </p><p>это не <em>end all be</em> для отзывчивых изображений, но это начало. кроме того, попробуйте поиграться с <code>background-size: cover</code> и, возможно, немного позиционировать с <code>background-position: center</code>.</p><p><strong> css: </strong></p><pre><code>.image-container{ height: 100%; // doesn't have to be '%' can also use 'px' width: 100%; margin: 0 auto; padding: 0; background-image: url(../img/exampleimage.jpg); background-position: top center; background-repeat: no-repeat; background-size: 100%; } </code></pre><p><strong> hmtl: </strong></p><pre><code><div class="image-container"></div> </code></pre>

<p>установите высоту или ширину изображения, чтобы быть% 100.</p><p>подробнее здесь . <a href="https://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container">как я могу автоматически изменить размер изображения, чтобы вместить контейнер div</a> </p>

<p>чтобы сделать изображение отзывчивым, используйте следующее:</p><p><strong>css</strong></p><pre><code>.responsive-image { width: 950px;//any width you want to set the image to. max-width: 100%; height: auto; } </code></pre><p><strong>html</strong></p><pre><code><img class="responsive-image" src="image url"> </code></pre>

<p>изображения должны быть установлены так</p><pre><code>img { max-width: 100%; } </code></pre>

<p>используйте bootstrap, чтобы освободить ваши изображения как показано используйте класс img-отзывчивый и все готово</p><pre><code><img src="cinqueterre.jpg" class="img-responsive" alt="cinque terre" width="304" height="236"> </code></pre>

<p>вместо добавления css, чтобы сделать изображение отзывчивым, добавление изображений с различным разрешением w.r.t. другое разрешение экрана сделает приложение более эффективным.</p><p>мобильные браузеры не должны иметь такое же изображение с высоким разрешением, которое требуется для настольных браузеров. </p><p>с помощью sass легко использовать разные версии изображения для различного разрешения с помощью медиа-запроса.</p>