Изображение не будет изменяться или корректироваться с помощью кода CSS и HTML - PullRequest
Новая
       5

Изображение не будет изменяться или корректироваться с помощью кода CSS и HTML

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

поэтому я пробовал много кодов, чтобы сделать эту работу, и, кажется, ничего не работает в моем конце для моего сайта Squarespace.

Я не веб-дизайнер и не разработчик, но я Кроме того, пытаясь выучить, этот «легкий» код выглядит очень просто, но мне трудно. Даже если я заменю изображение, оно все равно останется прежним.

Пожалуйста, посмотрите код здесь:

CSS: 

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container img {
  width: 100%;
  height: auto;
}
</style>

Html: 

<div class="container">
  <img src="https://cdn.pixabay.com/photo/2019/09/26/14/04/etretat-4506072_1280.jpg" alt="landing page" width="1500" height="528">
  <button class="btn">Learn More</button>
</div>

</body>
</html>

Буду рад услышать мизерные мысли. Большое вам спасибо, это так расстраивает меня прямо сейчас.

Ответы [ 3 ]

0 голосов
/ 30 апреля 2020 
<html>
<body>
<div class="container">
 <img src="https://cdn.pixabay.com/photo/2019/09/26/14/04/etretat-4506072_1280.jpg" alt="landing page" width="150" height="20">
 <button class="btn">Learn More</button>
</div>
</body>
</html>


This works perfectly
0 голосов
/ 30 апреля 2020

Это из-за свойства max-width, которым обладает контейнер. Просто удалите его, если вы не хотите, чтобы изображения были одинакового размера.

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

Я могу вам помочь. Я исправил твой код в HTML. Для изменения размера изображения вы должны использовать «px». 

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<style>
.container {
  position: relative;
  width: 100%;
  max-width: 200px;
}

.container img {
 width:100px;
 height:100px;
}
</style>
<h1>Html:</h1>

<div class="container">
  <img src="https://cdn.pixabay.com/photo/2019/09/26/14/04/etretat-4506072_1280.jpg" alt="landing page" width="1500" height="528">
  <button class="btn">Learn More</button>
</div>

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

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

...