установка изображения в определенном месте в контейнере

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

<div id="fotos" class="bananas" style="position: absolute;top: 100px;right: 108px" height="80px" width="80px"><img class="modal-content" id="imgdisplay" />

источник

2017-01-13 user7368271

Дайте изображение display:block;, а затем указать width для них. Вы можете сделать это как в px, так и в%.

Что касается установленного места. Если вы используете position:absolute; на картинке, тогда он не установил бы его положение относительно .bananas, потому что вы указали position:absolute за .bananas.

Вам необходимо будет изменить .bananas на position:relative;. См. Пример ниже.

.bananas{ 
 
    position:relative; 
 
    border:1px solid red; 
 
    height:160px; 
 
    width:100%; 
 
} 
 
.bananas img{ 
 
    display:block; 
 
    width:150px; 
 
    margin:0; 
 
    padding:0; 
 
    position:absolute; 
 
    top: 30px; 
 
} 
 
#imgdisplay1{ 
 
    left:10px; 
 
} 
 
#imgdisplay2{ 
 
    left:170px; 
 
}

<div id="fotos" class="bananas" > 
 
    <img class="modal-content" id="imgdisplay1" src="http://images.financialexpress.com/2015/12/Lead-image.jpg"/> 
 
    <img class="modal-content" id="imgdisplay2" src="http://images.financialexpress.com/2015/12/Lead-image.jpg"/> 
 
</div>

источник

2017-01-13 02:47:20 ab29007

Какова бы позиция была, когда я загружаю несколько изображений и имейте все отображаемые в одном и том же месте каждый раз, когда я делаю перетаскиваемый. прямо сейчас, каждый раз, когда я загружаю изображение, изображение загружается под каждым из предыдущих изображений, и оно исчезает после 4-х загрузок – user7368271

в порядке, вещь с абсолютным заключается в том, что он удаляет этот элемент из обычного потока контента. если первое изображение имеет 'left: 10px', то второй должен иметь' left: 160px; 'или больше. Я обновил свой пример для этого. – ab29007

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

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

Это зависит от того, где «установить место» есть. Вообще говоря, вы используете position: absolute; или position: fixed; с top bottom left right, чтобы поместить элемент в очень конкретное положение.

Установите размер по своему размеру.

Вы делаете это с width и height и с использованием любых единиц даст вам то, что вы ищете. px em % vh vw и т. Д.

источник

2017-01-13 02:48:14

установка изображения в определенном месте в контейнере

ответ

Смежные вопросы