Как сделать изображение отзывчивым после установки его высоты и ширины в bootstrap - PullRequest
Новая
       43

Как сделать изображение отзывчивым после установки его высоты и ширины в bootstrap

0 голосов
/ 17 марта 2020

Итак, я создаю этот портфель, и я нашел способы сделать так, чтобы текст и другие вещи были адаптивными, но я не могу сделать картинку отзывчивой, я установил ее высоту 325, но когда я сжимаю страницу изображение не отзывчиво Как я должен сделать это отзывчивым. Размеры исходного изображения около 1000 x 900, я попытался уменьшить размер изображения и использовать img-Fluid, но это не сработало. Когда я сжимаю страницу Когда страница в полноэкранном режиме 

<img src="{% static 'shetha.jpg' %}" height="325  "/>

Ответы [ 3 ]

0 голосов
/ 17 марта 2020

Вы также можете использовать этот код! 

<img src="{% static 'shetha.jpg' %}" class="img-fluid"  "/>

Ссылка: https://getbootstrap.com/docs/4.4/content/images/

0 голосов
/ 18 марта 2020

еще один ответ для адаптивного изображения. И тогда вы должны добавить в CSS и убедиться, что адаптивный класс не использует что-то другое, и загрузить css файл в html перед тегом head

HTML Файл 

<img src="{% static 'shetha.jpg' %}" alt="Smiley face" 
class="responsive">

CSS файл 

.responsive {
    width: 100%;
    height: auto;
  }

, если вы хотите загрузить css в html без файла create css, используйте этот код перед изображением. 

<style>
.responsive {
  max-width: 100%;
  height: auto;
 }
</style>

если вы хотите загрузить файл, сделайте это 

<!DOCTYPE html>
  <html>
  <head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>
  <body>
 <img src="{% static 'shetha.jpg' %}" alt="Smiley face" 
class="responsive">
  </body>
  </html>
0 голосов
/ 17 марта 2020

Вы просто должны добавить stati c URL изображения. и если у вас есть alt, то вы должны добавить высоту или ширину, или если вы хотите их обоих. но вы должны удалить его. / <- это если мой ответ поможет вам проверить ответ <3 </p> 

<img src="{% static 'shetha.jpg' %}" alt="Smiley face" height="42" 
width="42">
...