I'm working with a code structure that features columns containing full-width images.
<div class="col-3">
<img src="..." class="w-100" />
<div>Name</div>
</div>
Due to the variance in image sizes, there's no guarantee that the content below the images will be displayed in a single line (the height of the image is expected to vary based on its width).
In essence, if an image inside a .col has a width of 200px, its height should also be 200px (width equals height).
Here is an example using CSS:
@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css');
.img-prev {
height: 200px;
overflow: hidden;
}
.img-prev img {
max-height: 100%;
width: auto;
max-width: inherit;
margin: auto;
display: block;
}<div class="container">
<div class="row">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image1.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image2.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image3.jpg" alt="" class="img-fluid">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image4.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>Below is an example in HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image1.jpg" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image2.jpg" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image3.jpg" alt="" height="200" width="150">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image4.jpg" alt="" height="200" width="150">
</div>
</div>
</div>
</div>Lastly, here is an example with jQuery:
var imgs = $('.img-prev>img');
imgs.each(function(){
var item = $(this).closest('.img-prev');
item.css({
'background-image': 'url(' + $(this).attr('src') + ')',
'background-position': 'center center',
'-webkit-background-size': 'cover',
'background-size': 'cover',
});
$(this).hide();
});.img-prev {
height: 200px;
} <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="container">
<div class="row img-list">
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image1.jpg" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image2.jpg" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image3.jpg" alt="">
</div>
</div>
<div class="col-4 mb-2">
<div class="img-prev">
<img src="image4.jpg" alt="">
</div>
</div>
</div>
</div>Here is another option for you to consider:
<div class="container">
<img src="loginBackground.jpg" class="img-fluid" alt="Cinque Terre" width="200" height="200">
</div>
In the realm of SASS programming, particularly within an Angular Theme framework, when dealing with nested maps it is possible to use @debug to log their contents. However, this method currently outputs the information on a single line. Is there a feature ...
Attempting to set up multiple setInterval functions and store them (for later clearing) results in the last setInterval overriding the previous ones. This causes each interval to execute only once, with the same output. Below is a code snippet demonstrati ...
For my chess game, I want to display a message in the middle of the screen when a player wins, such as "White Wins," etc. The current setup is as follows: <div> <p> White Wins <p/> <div/> This message share the parent div with a ...
Having trouble with intellisense inside HTML for a simple page component. Also, renaming properties breaks the code instead of updating references. Typescript version: 4.8.4 Below is the code snippet: <script lang="ts"> import type { Bl ...
In my Bootstrap 4 project, I came across a helpful solution on Stack Overflow for creating a dropdown accordion style using JavaScript (Twitter Bootstrap: How to create a dropdown button with an accordion inside it?). I customized the script for my website ...
Encountering a common error in ReactJs projects: Error: Material-UI: unsupported non-unitless line height with grid alignment. Use unitless line heights instead. A snippet of the code where the error occurs: const breakpoints = createBreakpoints({}); le ...
I am currently attempting to add a box shadow under my header, similar to the design featured in the project mockup at https://github.com/RaghavMangrola/the-brighton-times. After trying to implement the following CSS property and value: .header { ...
I am trying to set a variable in one instance of a controller and read it in another. The variable I need to set is within the object vm (so $scope cannot be used). This is the code for the controller: app.controller("AppController", function(){ var ...
Apologies for being a newbie in this field, but I'm eager to learn. Any assistance would be greatly appreciated. In my project, there is a sidebar with rss links that I want to incorporate ajax functionality into. So, whenever a user clicks on a link ...
.ts import { Component, OnInit } from '@angular/core'; import { HelloServiceService } from 'src/app/hello-service.service'; import { FormBuilder, FormGroup, FormControl, FormArray, Validators } from '@angular/forms'; @Compone ...
Web components aim to modularize the web, independent of any specific framework being used. The Polymer project offers the ability to create web components without being tied to a particular framework, meaning they should be compatible with any framework. ...
My background image resizes with the screen height but stretches when I change the width. The content that should appear below it completely covers the image. This is my current code: HTML: <div id="bg"> <img src="http://placehold.it/2560x1 ...
I am working on a layout that consists of an editor and multiple buttons positioned above it on the right side. My goal is to add a panel just below "Button2" that will overlay the editor. This panel should expand and collapse when "Button2" is clicked, wh ...
Hey everyone, I've been working on this layout: https://i.sstatic.net/4Aye0.png Here's what I tried so far: Resetting padding and margin in the <a href> and in the <img src...> HTML container <div> <div className="pe ...
I'm currently encountering an issue with the font face in CSS3. The code I have been using is as follows: @font-face { font-family: James Fajardo; src: url('https://www.twoseven.nl/kurkorganicwines/wp- content/themes/kurk/fonts/James_Fajardo.t ...
My webpage consists of three large containers, each with an alpha transparent background. While they display correctly on desktop browsers, I'm facing alignment issues on tablets (both iOS and Android) and iPhones where the percentage sum seems to be ...
I'm currently in the process of designing a website where, upon clicking a navigation button, part of the page scrolls while the top header & nav bar remain fixed. Although I've managed to get the scrolling functionality to work and keep the top ...
I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...
After conducting some testing on a design I coded, I found that it functions well in FF 13, Chrome 21, IE 7/8, and Opera 11.62 for Windows, as well as Safari 5.1 for OS X. Unfortunately, since I only have WinXP, I had to utilize Adobe Browserlab to test f ...
My goal is to design a menu with a dropdown in Laravel. However, despite the code I've written, the second sub-menu is not showing up. Specifically, I want to display the submenu for Another dropdown, but it's not appearing as intended. For ref ...