Блог

Главная - Вопросы по программированию - объединить три изображения с помощью css и html

объединить три изображения с помощью css и html

#html #css #image

#HTML #css #изображение

Вопрос:

У меня есть три изображения. Я хочу их объединить

Я имею в виду эту ссылку

https://www.w3schools.com/css/css_positioning.asp#:~:text=An element with position: absolute,moves along with page scrolling.

Я пытаюсь добиться этого, объединив три изображения

Я пробовал статическое и относительное положение, но они не работали

  .object-left, .main-image  {
        position: absolute;
    }

 .object-right , .main-image{
         position: absolute;             //here I am using comma but not work 
}

.cshtml

 .object-left,
.main-image .object-right {
  position: absolute;
}  
 <div class="container-fluid">
  <div class="col-md-4 image">
    <img class="object-left" src="~/Graphics/Services Page/obj1.svg" style="width:50px;height:50px;" /> //1 image
    <img class="main-image" src="~/Graphics/Services Page/Mobile app developement.svg" /> //2 image
    <img class="object-right" src="~/Graphics/Services Page/obj2.svg" style="width:50px;height:50px;" /> //3 image
  </div>
  <div class="col-md-6" style="margin-top:100px;">
    <h2>Content</h2>
    <p class="description">asd</p>
  </div>
</div>

Ответ №1:

Проблема в том, что при использовании абсолютного позиционирования объекты начинаются в верхнем левом углу родительского объекта (т. Е. Местоположение 0x0), поэтому все ваши три изображения отображаются друг над другом. Все, что вам нужно сделать, это указать им, где они должны быть, добавив left свойство. Первое изображение может остаться left=0 , поэтому вам не нужно ничего делать. Второе изображение должно начинаться с ширины первого изображения, left=50px в моем примере ниже. Третье изображение должно начинаться с общей ширины первого и второго изображения, left=100px в моем примере ниже.

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

 .object-left {
  position: absolute;
}

.main-image {
  position: absolute;
  left: 50px;
}

.object-right {
  position: absolute;
  left: 100px;
}

.image {
  height: 100px;
}  
 <div class="container-fluid">
  <div class="col-md-4 image">
    <img class="object-left" src="http://placehold.it/50x50" />
    <img class="main-image" src="http://placehold.it/50x100" />
    <img class="object-right" src="http://placehold.it/50x50" />
  </div>
  <div class="col-md-6">
    <h2>Content</h2>
    <p class="description">asd</p>
  </div>
</div>

Примечание: в приведенном выше примере все изображения по умолчанию размещаются в верхней части родительского элемента. Если вы хотите, чтобы некоторые изображения начинались в другом месте, присвойте ему top свойство. В приведенном ниже примере я присвоил третьему изображению top=50px свойство выравнивать его по нижней части второго изображения:

 .object-left {
  position: absolute;
  top: 0;
}

.main-image {
  position: absolute;
  left: 50px;
  top: 0;
}

.object-right {
  position: absolute;
  left: 100px;
  top: 50px;
}

.image {
  height: 100px;
}  
 <div class="container-fluid">
  <div class="col-md-4 image">
    <img class="object-left" src="http://placehold.it/50x50" />
    <img class="main-image" src="http://placehold.it/50x100" />
    <img class="object-right" src="http://placehold.it/50x50" />
  </div>
  <div class="col-md-6">
    <h2>Content</h2>
    <p class="description">asd</p>
  </div>
</div>

Ответ №2:

Я думаю, это то, что вы хотите сделать. Я бы удалил встроенный стиль на изображениях объектов и поместил его в css. Я оставил верхнюю, левую и правую .object- части пустыми, чтобы вы могли разместить их там, где хотите.

Имеет ли это смысл?

 .image {
  position: relative;
}

.object-left {
  position: absolute;
  top: ;
  left: ;
}

.main-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.object-right {
  position: absolute;
  top: ;
  right: ;
}  
 <div class="image">
  <div class="object-left"></div>
  <div class="main-image"></div>
  <div class="object-right"></div>
</div>

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

1.@niskuremdir ну, вы должны установить top: ; right: ; значения для правого изображения, то же самое для левого изображения. top, right, bottom и left — это значения, которые вы можете установить, чтобы указать положение, в котором оно должно быть размещено. Для меня это трудно понять, поскольку у вас нет изображений.

2. Вы отредактировали свой вопрос с помощью 1, 2 и 3 со стрелками, это то положение, в котором вы хотите их разместить?

3. @ Dejan. S да, я забыл об этом