Problem laying out items in an image gallery
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
I am having trouble laying out my items in a gallery. I would like to be able to display an image in a horizontal or vertical format and have it fit within a fixed 300px x 300px box and align to the bottom of the box. I would like the “attribution” to line up with the right edge of the image. Here is a picture of the desired layout.
Picture of desired layout
This is the html:
.gallery_item_square {
height:450px;
width: 300px;
display: flex;
flex-direction: column;
background: brown;
}
height:450px;
width: 300px;
display: flex;
flex-direction: column;
background: brown;
}
.gallery_square {
height:300px;
width:100%;
display:block;
background: green;
}
.gallery_description {
width:100%;
height: auto;
}
.image_attribution {
display:flex;
flex-direction:column;
align-items:flex-end;
}
.image_square {
display: block;
background: black;
}
.image_contain {
object-fit: contain;
}
.attribution {
float:right;
background: blue;
}
<div class=”gallery_item_square”>
<div class=”gallery_square”>
<div class=”image_attribution”>
<div class=”image_square”>
<img class=”image_contain” src=”source”>
</div>
<div class=”gallery_attribution”>
<span class=”attribution”>
<a href=”source”>ARC/Qedema</a>
</span>
</div>
</div>
</div>
<div class=”gallery_description”>
<p>This is a description</p>
</div>
</div>
I am unable to make the image fit within the box. Ive tried use “object-fit:contain” but to no avail. I would be grateful for any help you can offer.
أضف إجابة