Блог

Главная - Вопросы по программированию - Как склеить 1 изображение поверх другого и сохранить их вместе после изменения размера с максимальной шириной: 100%

Как склеить 1 изображение поверх другого и сохранить их вместе после изменения размера с максимальной шириной: 100%

#css

#css

Вопрос:

У меня есть width: 100%, что мне очень необходимо. Основываясь на этом примере кода, может ли кто-нибудь помочь мне приклеить оранжевый символ поверх любой клавиши и сохранить его там, даже если я изменю размер браузера? например, как это уже происходит с клавиатурой…. Большое вам спасибо!

ДЕМОНСТРАЦИЯ

HTML

 <!DOCTYPE html>
<html lang="en">

<hsrc="https://i.imgur.com/jc1rbcJ.gif">
    </div>
  </body>

  </html>
</body>

</html>

CSS

 .container {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.imageOne {
  max-width: 100%;
}

.

Комментарии:

1. Не используйте значения пикселей, используйте проценты для позиционирования наложения.

2. но что, если вам нужно сделать все ключи на% одинаковыми с точностью?

3. Их не будет … все они будут в разных местах изображения — codepen.io/Paulie-D/pen/dgcha

4. Вы также можете использовать плавающие значения для%, если вам нужно быть точным (пример top: 16.6667%; )

5. jsfiddle.net/fnwujLsq

Ответ №1:

 width: 600px; max-width: 100%;
width: 100%; max-width: 600px;

Родительский элемент имеет ширину 1000 пикселей
Ширина указывает, что элемент должен быть шириной 600 пикселей. Это не нарушает правило максимальной ширины, так что это 600 пикселей!
Ширина указывает, что элемент должен быть шириной 1000 пикселей. Это нарушает правило максимальной ширины, поэтому уменьшает размер элемента до 600 пикселей.
Родительский элемент имеет ширину 320 пикселей
Ширина указывает, что элемент должен быть шириной 600 пикселей. Это нарушает правило максимальной ширины, в котором говорится, что элемент может иметь ширину не более 320 пикселей, так что это 320 пикселей!
Ширина указывает, что элемент должен быть шириной 320 пикселей. Это не нарушает правило максимальной ширины, так что это 320 пикселей!

найдите больше на https://css-tricks.com/tale-width-max-width /

Ответ №2:

Как вы указали, каждый экран имеет разные размеры. Итак, в вашем запросе есть два ключевых фактора, о которых вам нужно позаботиться. Позиция и размер вашего .imageTwo должны всегда указываться в%, только тогда оно будет иметь ту же позицию и размер, что и его родительский файл .container . Для предложенной вами буквы Y на клавиатуре я бы сделал это:

 .imageTwo {
  position: absolute;
  top: 42%;
  left: 33.5%;
  width: 2%;
  height: 5%;
}