(Простой) max-width: 100% не работает для IMG (на мобильном телефоне), см. Код

Question

Это, самый простой из кодов, не работает. Почему он не будет изменять размер на мобильном телефоне?

Ура

Я думал, что он не знает, к чему относится 100% (из-за таблицы, которую я использую, чтобы выровнять его по центру и по вертикали, и по горизонтали), тем не менее, я не могу заставить его работать.

(HTML)

html,
body,
#wrapper {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

#wrapper td {
  vertical-align: middle;
  text-align: center;
}

<body>
  <table id="wrapper">
    <tr>
      <td><img src="logo.png" max-width="100%"></td>
    </tr>
  </table>
</body>

html css image

0

Johan Kragbæk 18 Авг 2019 в 15:00

Answer 1

Если вы используете таблицу, этот отзывчивый CSS будет работать

/* full view of browser */
html, body {
   width: 100%;
   height: 100%;
   margin: 0;
}
/* table full width and no overflow */
#wrapper {
   width: 100%;
   max-width: 100%;
   overflow: hidden;
   border-spacing: 0;
   border-collapse: collapse;
}
/* table datacell also full width */
#wrapper td {
   width: 100%;
   padding: 0;
   vertical-align: middle;
   text-align: center;
}
/* image keeps aspect ratio */
#wrapper img {
   width: 100%;
   height: auto;
   border: 0;
}

0

bron 18 Авг 2019 в 13:16

Answer 2

Может быть так:

div {
  display:flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content:center;
}
div > img {
  max-width: 100%;
}

<div>
  <img src="https://dummyimage.com/600x400/000/fff.png">
</div>

JSFiddle

0

howtopythonpls 18 Авг 2019 в 16:08

(Простой) max-width: 100% не работает для IMG (на мобильном телефоне), см. Код

2 ответа

Похожие вопросы

Новые вопросы

html