Fill a grid column with a image? - html

Question

I have a css grid container I use to have a image slider and some text on the right. I have everything working except for getting the image to actually stretch across the whole container.
How I have it set up is (trunicated):
<div class="slideshowGrid">
<div class="slideshow-container">
<div class="mySlides fade">
<img src="{{ module.slide.slide_image.src }}" alt="{{ module.slide.slide_image.alt }}" {{ loadingAttr }} {{ sizeAttrs }}>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="textboxes">
<div class="text">
<h3 class="headerText">{% inline_text field="slide.heading_text" value="{{ module.slide.heading_text }}" %}</h3>
<div class="bodyText">
{% inline_rich_text field="slide.body_text" value="{{ module.slide.body_text }}" %}
</div>
</div>
<div class="linkBox">
<div class="linkingText">
Book Now
</div>
</div>
</div>
</div>
I guess my question is; is there anyway to stretch the image div to fill the available column in the grid without forcing the image to be a background image? I know background image is a way to do it, but I feel like it would require some significant code changes to do that. Here's my css:
code:
* {box-sizing:border-box}
.slideshowGrid{
display: grid;
grid-template-columns: 75% 25%;
justify-content: center;
align-content: center;
justify-items: stretch;
}
.textboxes{
display: grid;
justify-items: center;
}
.linkBox{
align-self: flex-end;
justify-self: center;
}
/* Slideshow container */
.slideshow-container {
max-width: 100%;
height: 500px;
position: relative;
margin: auto;
}
.slideshow-container img{
height: 500px !important;
width: 1200px !important;
object-fit: cover !important;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: black;
font-size: 15px;
padding: 8px 12px
width: 100%;
align-self: center;
justify-self: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
Thanks!

Answer 1

Okay, I see what you're doing. You've explicitly defined the height of the container for the images and then applied attributes to the images inside of that container. So, the easiest fix is to just apply the same height to your images, give them a width of 100% so they fill the container horizontally, and use object-fit: cover; to crop them into the container and maintain their aspect ratio. https://jsfiddle.net/astombaugh/ad4kb2v5/46/ You may need to tweak the results in the context of your entire project but this should at least get your image container moving in the right direction.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
let headers = document.getElementsByClassName("headerText");
let bodies = document.getElementsByClassName("bodyText");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex-1].style.display = "block";
}
* {
box-sizing: border-box;
}
body {
background-color: grey;
}
.slideshowGrid {
display: grid;
grid-template-columns: 75% 25%;
justify-content: center;
align-content: center;
justify-items: stretch;
}
.textboxes {
display: grid;
justify-items: center;
}
.linkBox {
align-self: flex-end;
justify-self: center;
}
/* Slideshow container */
.slideshow-container {
height: 500px;
position: relative;
}
.slideshow-container img {
height: 500px;
width: 100%;
object-fit: cover;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: black;
font-size: 15px;
padding: 8px 12px;
width: 100%;
align-self: center;
justify-self: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<div class="slideshowGrid">
<div class="slideshow-container">
<div class="mySlides fade">
<img src="https://2822935.fs1.hubspotusercontent-na1.net/hubfs/2822935/rw_phaseII.jpg">
</div>
<div class="mySlides fade">
<img src="https://2822935.fs1.hubspotusercontent-na1.net/hubfs/2822935/Riverwalk_Day-View_CYMK-web.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div class="textboxes">
<div class="text">
<h3 class="headerText">TEST</h3>
<div class="bodyText">
adsfasdfasfadsfds
</div>
<h3 class="headerText">
Test 2
</h3>
<div class="bodyText">
werrererewrwereewrwer
</div>
</div>
<div class="linkBox">
<div class="linkingText">
TEST
</div>
</div>
</div>
</div>