Есть ли способ исправить положение изображения внутри div без фона?
В настоящее время я интегрирую представление статьи в среде ruby on rails. Я хотел создать div высотой 450px, установить в нем изображение статьи и исправить так, чтобы он выглядел так
<div class="image_container>
<img src="/path/to/image.jpg" /> <!-- or <%= image_tag @article.image %> -->
</div>
и CSS будет выглядеть так
.image_container{
position: relative;
height: 450px;
overflow-y: hidden
}
.image_contianer img{
height: 100%
position: fixed;
}
Очевидно, это работало до тех пор, пока я не установил фиксированное положение, где он был зафиксирован для области просмотра, а не для div.
Есть ли способ исправить это тем или иным способом, не используя background-image
прямо в html чтобы исправить изображение?
РЕДАКТИРОВАТЬ
Я создал кодовую ручку, чтобы вы, ребята, могли понять, о чем я говорю, извините за время, которое заняло:
http://codepen.io/Drillan767/pen/rrKgyA
заранее спасибо
1 ответ
Хорошо, у меня есть решение, где я гнездую div
s для достижения того же эффекта:
.image-container {
position: relative;
height: 400px;
overflow-y: hidden;
}
.image-container img {
position: absolute;
height: 100%;
}
.image-container-holder {
position: relative;
height: 100%;
overflow-y: scroll;
}
.my-child {
height: 40rem;
background: rgba(0, 0, 255, .5);
margin-top: 20rem;
margin-left: 5rem;
}
-
<div class="image-container">
<img src="https://placekitten.com/g/1450/500">
<div class="image-container-holder">
<div class="my-child">
Here
</div>
</div>
</div>
Это решает это, хотя я все еще сказал бы, заставляя это работать с background-position: fixed
было бы более хорошим решением.