Dynamic varying size image gallery

Hey there! I've been trying to make this https://codepen.io/junedc/pen/yqXVaR responsive, but I'm having trouble. When I remove the height or change it to a percentage, the image disappears.

<div class="gallery-height">
<div class="img" style="height:125px; "></div>
<div class="img" style="height:400px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office1.jpg');"></div>
<div class="img" style="height:130px;"></div>
<div class="img" style="height:300px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office2.jpg');"></div>
<div class="img" style="height:300px;background-image: url('http://13.210.222.166/wp-content/uploads/2018/07/office3.jpg');"></div>

htmlcssflexbox

Answer №1

In order to incorporate it as a background image in the css, I have a handy trick that I often apply in my work:

url('http...') no-repeat center center fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Save and showcase SQL, PHP, HTML, and JS code exactly as it is preserved in MYSQL database

Is there a way to store and display complete JS, PHP, and HTML code in MySQL without altering the format? The stored PHP code should appear as: <?php echo "something"; ?> And not just: something For JavaScript: <script> document.write(&ap ...

javascriptphphtmlmysqlsql

Using jQuery, check if a click event triggers a div containing a specific class. If so, modify the value of another class

I am working on a code for an application that allows you to select an icon and see the corresponding CSS line displayed. This makes it easy to copy and paste the code for use in another project. The issue I am facing is with the $(this) selector. Even tho ...

javascriptjqueryhtmlthis

Choosing an element in JQuery based on the value of its style property

I have three divs with the same class but different styles. I need to select only the third one using JQuery. <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-div ...

javascriptjquerycss

Video on YouTube restarts upon hiding and revealing its container div

Is there a way to retain the progress and playback position of a YouTube video embedded within a div on a webpage? Currently, when I hide and then show the div using jQuery/CSS, the video reloads and starts from the beginning. Is there a solution to avoid ...

javascriptjqueryhtmlyoutube

css("Right", posVar); is not functioning properly

The main goal here is to achieve an instant "jump" to the right without any flashing effects. Instead of using .animate(), which can cause a flickering effect, I believe that .css() will provide the desired instantaneous movement to the right. However, fo ...

javascriptjquerycssjquery-animate

The line break is being disregarded by jQuery's insertBefore function

In my simple HTML, I have a div with a limited width. Inside are several span tags styled with nowrap. Here is the CSS: .content { width: 50%; margin: 10px; padding: 10px; border: 1px solid black; } .adder { color: blue; cursor: po ...

javascriptjqueryhtmlcss

Tips for ensuring icons stay in the top right of a Bootstrap 4 navbar when viewing on mobile devices

After trying various approaches, I am still struggling to keep the icons in the top right corner when transitioning to mobile view without duplicating them. The desired order is as follows: on desktop: brand (far left) - nav links (middle) - account & ...

cssbootstrap-4

display a container and navigate to the specific link

Greetings! Could someone please help me make this code function properly? I am attempting to display the DIV (slidingDiv) and navigate to the selected ANCHOR (#anchor-01 + #anchor-02 + #anchor-03)... However, the code currently only allows me to go to the ...

javascriptjqueryhtmlanchor

Displaying an alert on a webpage that shows a label input using JavaScript and

I'm currently working with HTML5 and JavaScript and I'm facing a challenge. I want to create a feature where users can input any word into a label, and when they click on a button, an alert is triggered with the given text. However, despite my ...

javascripthtml

The Simple HTML Dom parser is failing to parse contents on these specific websites

I tried using a basic HTML DOM parser but it's encountering issues when parsing certain websites. include_once 'simple_html_dom.php'; $html=file_get_html('http://www.lapenderiedechloe.com/'); This results in an error message like ...

javascriptphpjqueryhtml

How can I create a responsive 3-column layout within a Bootstrap card design?

I am working on an angular 9 application that includes a bootstrap card in the body of the card <div class="animated fadeIn" style="margin-left: 2%;margin-right: 2%;margin-top: 2%;width: 80%;" id="qgroup-div-g{{ei}}" *ngFor="let g of thi ...

cssangulartwitter-bootstrapbootstrap-4

Leveraging Angular interpolation with the "ngIf" directive

In my table, I have a specific requirement for the first column to change color based on a variable within my class. For instance, within my DisplayProject.ts class, there is a property named indexOfColor DisplayProject.ts export class DisplayProject impl ...

htmlcssangulartypescript

I encountered an issue while using mediaRecorder to save a JavaScript animation; the blob value returned as null

My current project involves using Vanta js to create an animated background and mediaRecorder to capture the canvas as a webm file. The recording process is supposed to start from the beginning and stop after 1 second, exporting the webm file. However, I ...

javascripthtmlmediarecorderwebm

A feature that updates the value of a textarea by continually adding new data instead of replacing it

One common issue that I am facing involves setting the value of a textarea using a function. Initially, when I click the button to set the value, everything works fine. However, if I attempt to set the value again by choosing a different option from a lis ...

javascripthtml

What is the best way to create a slideshow using an IFrame?

Currently seeking a solution for an iframe slideshow that can smoothly transition between multiple HTML iframes. I have a total of 5 iframes that need to rotate automatically and continuously. Any suggestions on how to build a lively and dynamic iframe sl ...

javascriptjqueryhtmliframe

Application utilizing electron technology featuring various tabbed browsing windows connecting to secure websites

Currently, I am in the process of developing my own unique version of a platform similar to using Electron technology. The objective for this app is to provide users with the ability to view multiple URLs simultaneously, such as and , through a tabbed i ...

javascripthtmlnode.jselectron

Passing dynamically loaded parameters to a function during dropdown value selection in Angular 2

Could you please review if I am passing the parameters correctly in the li tag's click function of the updateId method? The console errors only point to that line. This is my app.component.html code: <div class='form-group' style="width ...

javascripthtmltwitter-bootstrapangular

Issue with CSS not getting applied to content placed within modal dialog on Internet Explorer

After writing some code, I encountered a situation where I have multiple jQuery UI modal dialogs. I decided to remove the default title bar provided by jQuery in these modal dialogs. The code snippet I used within the create function in the dialog code to ...

jqueryhtmljquery-uicss

Animating a character's movement along a bezier curve using HTML5 canvas

Brand new to canvas and animations. What's the reason this (Fiddle) won't work with a sprite while this other one (Fiddle) works seamlessly with a rectangle fill? What element am I overlooking here: ctx.drawImage(img, 10, 10, 13, 50); It does ...

javascriptcsshtmlcanvas

There seems to be a Javascript TypeError occurring - it looks like the function document.routeEvent

I am currently working on an old webpage that contains JavaScript. However, there is a function that does not seem to work properly with newer browsers such as Mozilla, Chrome, and Safari. Interestingly, the page functions perfectly fine on Internet Explor ...

javascripthtmlsyntax-error