Расположите изображение относительно предыдущего изображения, которое динамически измеряется и позиционируется

html css image css-position

110 просмотра

3 ответа

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

Я также нашел различные решения для DIV с фиксированным соотношением, в которых в моем случае используется нижнее основание, приводящее к увеличению размера.

Итак, вот моя первоначальная ситуация (см., Например, https://www.giulietta-del-conte.com/ ). По существу:

<body>
 <img alt="Logo" width=1280 height=853 src="/img/GdC-Logo.jpg">
</body>

С участием:

img {
  height:auto; 
  width:auto; 
  max-width:80%;
  max-height:80%;
  position: absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
 }

Теперь я хочу разместить второе изображение (баннер) точно под первым изображением. Баннер имеет такую ​​же ширину и гораздо меньшую высоту.

Я пытался создать родительский div, но это не сработало. Я не могу получить его точно необходимого размера, поэтому я могу изменить размер и расположить два изображения. Я попытался создать это с правильной шириной и объединенной высотой. Тем не менее, он не будет должным образом изменен с использованием max-width и max-height (становится непропорциональным).

Довольно просто создать версию, которая позволяет изменять размеры в любом направлении, но мне не удается получить версию, которая позволяет изменять размеры в обоих направлениях и центрировать объединенный блок.

Любая идея? Я не хотел создавать комбинированное изображение в виде карты.

Автор: B_pi_P Источник Размещён: 08.11.2019 11:16

Ответы (3)


0 плюса

Это мой первый раз здесь. Так что был бы очень признателен, если бы ответ был таким, как вы ожидали. Также дайте мне знать, если это не так, как вы хотели. Благодарю.

 <!DOCTYPE html>
     <html>
        <head>
        <link rel="stylesheet" href="new 1.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        </head>
        <body>
            <div>
            <img id= "pic" alt="Logo" width="1280" height="853" src="https://www.giulietta-del-conte.com/img/GdC-Logo.jpg">
            <img id="banner" src="https://www.giulietta-del-conte.com/img/Scope.jpg" alt="banner" width="1280" height="200px">
            </div>
        </body>
    </html>

CSS:

#pic {
    display: block;
    width: 100%;
    height: 100%;
}
#banner {
    display: block;
    width: 100%;
    height: 10%;
}
 div {
    height:911px;
    width:1280px;
    max-width:80%;
    max-height:80%;
    position:absolute;
    top:46%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
}
Автор: Sazz Размещён: 20.08.2016 12:46

0 плюса

Решение

Хорошо, вот взломать. Я поменял баннер, у которых есть совместный размер обеих картинок. Тогда я могу правильно изменить размер и отцентрировать его. Осталось правильно расположить основное (оригинальное) изображение. Готово. Решение видно на https://www.giulietta-del-conte.com/ .

Автор: B_pi_P Размещён: 20.08.2016 04:04

0 плюса

Я не думаю, что это возможно обойтись без использования родительского div для центрирования. Однако этого можно добиться с помощью комбинации flex и «normal» css. Вот рабочий пример .

Вам понадобится горизонтально отцентрованный гибкий контейнер ( .centeredв этом примере), который занимает 100% высоты браузера. Вложенный в контейнер flex, добавьте non flex div (например display: block). Поскольку негибкий div является единственным элементом гибкого макета, он будет отцентрирован по горизонтали и вертикали, что позволит вам создать отдельный негибкий макет элементов внутри него.

Теперь, пока максимальная ширина изображений установлена ​​на 100% (без указания высоты), их пропорции будут сохраняться независимо от ширины их родительских элементов. Конечно, я ничего не сделал для ограничения переполнения по вертикали, но пока пропорции изображения не сумасшедшие, стоит попробовать.

/* For demo purposes */
* { margin: 0; padding: 0; }

.centered {
  display: flex;
  height: 100vh;            /* Needed for vertical centering */
  align-items: center;      /* Flex - vertical centering */
  margin: 0 auto;           /* Horizontally center the layout */
  justify-content: center;  /* Flex - horizontal centering of content */
  text-align: center;       /* Keep images centered in the event of layout width exceeding image width */
  max-width: 60%;           /* For demo purposes */
  background: #eee;         /* For demo purposes */
}

/* Nested non flex container allows you to create a separate layout inside the flex container */
.centered div {
  display: block;
  padding: 10px;
}
img {
  max-width: 100%;
  margin: 5px 0;
}
<div class="centered">
  <div>
      <img src="http://placehold.it/1000x500">  
      <img src="http://placehold.it/1000x200">
  </div>
</div>

Автор: antidecaf Размещён: 20.08.2016 07:38
Вопросы из категории :
32x32