img не меняет ширину? - PullRequest
Новая
       0

img не меняет ширину?

0 голосов
/ 17 апреля 2020

Я очень новичок в кодировании, и у меня возникли проблемы с подгонкой изображения примерно до 80% ширины экрана.

Изображение не движется, несмотря на то, что я изменил width: 80% на другие проценты. это также уходит за край экрана, несмотря на то, что я ставлю overflow: 0px; и flex-wrap: wrap;

Я уже успел это выяснить, но этот код почему-то не отвечает по какой-то причине и я не уверен, что делаю не так, поэтому любая помощь приветствуется!

вот мой код: 

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style type="text/css">
 <style>

  #title {
    width: 80%;
    height: auto;
    overflow: 0px;
    margin: 0px;
    padding: 0px;                                                                                  
    display: flex;
     flex-wrap: wrap;
     justify-content: center;
   }

 </style>
</head>
<body style="background-color:black">
  <img id="title" src="http://www.vibrantandalive.com/pictures/title.png"/>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

У вас есть открывающий тег css дважды, это шоуд работа. 

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style type="text/css">
   #title {
    width: 80%;
    height: auto;
    overflow: 0px;
    margin: 0px;
    padding: 0px;                                                                                  
    display: flex;
     flex-wrap: wrap;
     justify-content: center;
   }
 </style>
</head>
<body style="background-color:black">
  <img id="title" src="http://www.vibrantandalive.com/pictures/title.png">
</body>
0 голосов
/ 17 апреля 2020

Не думаю, что вам нужны все эти css элементы: 

* {
  margin: 0;
  padding: 0;
  border: 0;
}

#title {
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body style="background-color:black">
  <img id="title" src="http://placekitten.com/301/301" />
</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...