4

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

Как это лучше сделать?

Может через background-image?

Желаемый результат:

want

Как сейчас:

have

Код:

.skull {
  position: absolute;
  width: 864px;
  height: 988px;
  margin: 0 auto;
  top: 250%;
  transform: rotate(-180deg);
}
<img class="skull" src="img/skull.svg" alt="skull" />

2 ответа 2

5

Вам достаточно добавить "обертку" вокруг Вашего изображения и "обрезать" лишнее с помощью свойства overflow, со значением "hidden":

body {
  height: 500px; 
}

img {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0;
}

div {
  width: 400px;
  height: 200px;
  overflow: hidden;
  border: 1px solid #ccc;
}

div > img {
  display: block;
  margin-top: -100px;
}
<div>
  <img src="https://picsum.photos/id/1011/400" />
</div>

Позицию изображения в контейнере можно менять при помощи margin или продолжить использование абсолютного позиционирования (как в Вашем примере).

В данном примере использовано квадратное изображение 400px х 400px.

4

Используйте overflow: hidden

.wrapper {
  max-height: 100px;
  overflow: hidden;
  margin-bottom: 10px;
}

.h400 {
  height: 400px;
}

.w200 {
  width: 200px;
}

.bg-green {
  background-color: green;
  color: white;
}

span {
  background-color: #c6c2c2;
}
<div class="wrapper">
  <div class="w200 h400 bg-green">
    Блок 200*400
  </div>
</div>
 Из-за того, что у <span>.wrapper</span> максимальная высота 100px, блок 200*400 обрезается и выглядит как 200*100

Вы можете также использовать background,
управлять положением картинки при помощи background-position

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.block {
  height: 200px;
  width: 200px;
  background: url(https://image.flaticon.com/icons/svg/556/556209.svg) no-repeat;
  background-position: 0 -70px;
  transform: rotate(180deg);
}
<div class="block"></div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.