Адаптивно изменяйте размер изображения с помощью CSS3 относительно ширины его родительского элемента, не превышая его исходный размер. - PullRequest
Новая
       8

Адаптивно изменяйте размер изображения с помощью CSS3 относительно ширины его родительского элемента, не превышая его исходный размер.

1 голос
/ 16 июня 2020

Я начал создавать страницу Tribute на CodePen.io, следил за пользовательскими историями и получил 9 из 10 тестов. Я застрял в изменении размера изображения с помощью CSS3. Я погуглил, попробовал ответы, но у меня ничего не помогло. Код CSS: 

#img-div {
   text-align: center;
   display: block;
   filter: grayscale(100%);
   width: 100%;
}

img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
}

Вот ссылка на страницу CodePen https://codepen.io/dansia/pen/NWxNMJP посмотрите на нее и помогите мне решить эту проблему.

Ответы [ 3 ]

0 голосов
/ 16 июня 2020

Вы пытались вызвать его из своего div? 

#img-div {
   text-align: center;
   display: block;
   filter: grayscale(100%);
   width: 100%;
}

#img-div img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
}

<div id=“img-div”>
 <img href=“something”/>
</div>
0 голосов
/ 18 июня 2020

Я добавил margin-left (auto) , margin-right (auto) и display (block) в img элемент и это сработало для меня. Наконец-то получил 10/10 .

Тогда весь код: 

#img-div {
  text-align: center;
  display: block;
  filter: grayscale(100%);
  width: 100%;
}

img {
  padding-top: 10px;
  height: auto;
  max-width: 330px;
  **margin-left: auto;
  margin-right: auto;
  display: block;**
}

Спасибо за ваши предложения.

0 голосов
/ 16 июня 2020

Эта ссылка содержит то, что вам нужно: https://www.freecodecamp.org/forum/t/tribute-page-responsively-resize-img-relative-to-parent-element/203586

Код, если ссылка не помогает: 

#image {
max-width: 250px; <!--Base width-->
width: 100%; <--Size according to parent use percentage-->
display: block;
margin: auto; <!-- center the image -->

}

...