Picture in box container

Having trouble figuring out how to fill containers with images? I've encountered an issue.

If the images are too short, they need to be full height, but they can overflow the sides. If the images are too narrow, they should be full width, but they might overflow at the bottom.

https://i.sstatic.net/Biuz1.png

<div class="cb-img-fw four-image">
    <a href="postURL"><img src="imageURL"></a>
</div>

Here is the current CSS:

.four-grid-post > .four-image{
max-height: 184px;
max-width: 271px;
overflow: hidden;
}

.four-grid-post > .four-image img{
min-width: 100%;
max-width: 100%;
height: auto;
}

I'm considering jQuery solutions as well, but since my content loads with ajax, it could potentially create some issues.

jquerycssresizeimage-resizing

Answer №1

If you want to make use of the CSS3 properties object-fit and object-position, keep in mind that they are currently not supported in Microsoft Edge. However, there is a helpful polyfill available here. For more information on browser support, check out CanIUse.

.four-grid-post > .four-image {
display: inline-block;
height: 184px;
width: 271px;
overflow: hidden;
border: dashed 2px red;
}

.four-grid-post > .four-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center; /* To crop from the bottom */
}
<div class="four-grid-post">
<div class="cb-img-fw four-image">
<a href="postURL"><img src="http://placehold.it/400x300"></a>
</div>
<div class="cb-img-fw four-image">
<a href="postURL"><img src="http://placehold.it/400x200"></a>
</div>
<div class="cb-img-fw four-image">
<a href="postURL"><img src="http://placehold.it/300x400"></a>
</div>
</div>

Answer №2

My recommendation is to update the img with the background property in CSS.

.four-image {
  display: block;
  border: 1px solid gray;
  width: 271px;
  margin-bottom: 1em;
}

.four-image a {
  display: block;
  width: 271px;
  height: 184px;
  background-size: cover;
  background-position: center center;
}
<div class="cb-img-fw four-image">
  <a href="postURL" style="background-image: url('http://placehold.it/600x200');"></a>
  600x200
</div>
<div class="cb-img-fw four-image">
  <a href="postURL" style="background-image: url('http://placehold.it/200x600');"></a>
  200x600
</div>
<div class="cb-img-fw four-image">
  <a href="postURL" style="background-image: url('http://placehold.it/600x600');"></a>
  600x600
</div>

Answer №3

Check out this handy script that helps set your image as a background image. You can easily customize the height and width of the background image using this method.

var images = $(".four-image").find("img");
 $.each(images, function (index, item) {
 var $item = $(item),
 src = $item.attr('src'),
 cont = $item.closest('.four-image').css('background-image', 'url(' + src + 
 ')');
});

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

Creating a custom blockquote style for a WordPress Twenty Fifteen child theme

Currently, I am creating a new child theme for Twenty Fifteen completely from scratch. The one area I am struggling with is customizing the appearance of the blockquote using CSS. Here is an example of the custom CSS I have added to the blockquotes within ...

htmlcsswordpress

Evolution of the material through a fresh new slide

Can someone assist me with an animation issue? I have a slideshow consisting of 4 images that are supposed to transition automatically after a set time interval. Upon initially loading the webpage, the animation works perfectly as intended. However, subs ...

javascripthtmlcss

showcase fresh material using the jquery fancybox

I have a fancybox popup using jQuery that is functioning as intended. Inside the popup, there is a link <a href="http://example.com/foo/bar.html">show another content of this fancybox</a> However, when you click on the link, the fancybox disap ...

javascriptjqueryhtmlpopupfancybox

Implement a feature that loads the CSS properties from a different webpage when clicked

Whenever a hyperlink is clicked, I want to create a seamless transition with three steps: 1) The content should fade out, leaving only the background image visible 2) The background image will then smoothly blend into the background image of the page lin ...

jquery

Inline display malfunctioning

I am facing an issue while integrating ngTimepicker into my Angular project. It is functioning properly, but I am unable to inline the ngTimepicker inputs with the form input. Check out the plunker here I would like this section of HTML to be displayed in ...

javascripthtmlcssangularjs

Using ng-repeat in Angular causes the style of a div to become hidden

Utilizing angular ng-repeat to generate multiple divs, the original template html code is as follows: <div class="span5 noMarginLeft"> <div class="dark"> <h1>Timeline</h1> <div class="timeline"> <div c ...

htmlcssangularjs

What is preventing me from applying styles to the first word in my Angular ngFor iteration?

I'm currently attempting to customize the initial word of a string within my Angular ngFor loop. Strangely, the class gets applied but the style defined in my CSS file is not. Inline styling also does not seem to work - any ideas why? This is the CSS ...

htmlcssangulartypescript

I possess a webpage containing a div element that is loaded dynamically through ajax

One issue I'm facing is with a page containing a div that gets loaded via ajax when a button is clicked. The problem arises when a user tries to refresh the page by pressing F5, as the content of the div gets lost! Is there a way to ensure that when ...

javascriptjqueryajaxrefresh

Problem with selecting elements using Jquery syntax

I am encountering issues with jQuery syntax when trying to locate the same element that is written differently. for (var i = 0; i < _max ; i++) { var _carouselCell = "<div class=\"carousel-cell\"><div class=\"item 1\" id=&b ...

jquery

Is it possible to insert information from a DataTable into a database table without requiring a predefined structure in the database table beforehand?

Is there a way to create a database table directly from an Excel sheet without needing to have a fixed database structure beforehand? I've attempted using SQLBulkCopy and other methods, but they all require pre-defined table specifications. Is there a ...

jqueryasp.net-mvc

"Encountering a bug when attempting to load Google Maps while hiding it

I encountered a bug while setting up a google map on a hidden tab. The map is scrollable and zoomable, but it doesn't extend across the entire canvas - leaving the rest of the canvas in grey. Using the jQuery Map Extension (http://code.google.com/p/j ...

javascriptjquerygoogle-maps

Tips for creating a blur effect on all options except for the selected 2 out of 4 using jQuery

My goal is to choose 3 options from a list and once 3 options are selected, all other options will be blurred to prevent further selection. Please review the code snippet I have provided below. Link to File <!DOCTYPE html> <html> <head> ...

javascriptjquery

Clicking on only one element should trigger it

My HTML structure looks like this: <article> <overlay> <IMG> </overlay> <div class="wrapper"> </div> </article> <article> <overlay> <IMG> </overlay> <di ...

javascriptjquery

Safari/IE lags when scrolling to the top of the page

I am attempting to keep an element fixed at the top position by using position:relative, $(document).ready(function() { var container = $(".container"); container.css("overflow-y", "auto"); container.css("overflow-x", "hidden"); containe ...

javascriptjquerycssinternet-explorersafari

Utilizing Bootstrap to allow for seamless text wrapping around a text input field

I am trying to implement a "fill-in-the-blank" feature using Bootstrap, where users need to enter a missing word to complete a sentence. Is there a way to align the text input horizontally and have the rest of the sentence wrap around it? This is my curr ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Different ways to toggle multiple images using jQuery on various button clicks

After spending some time on my code, I have come across a peculiar issue. I am working with 4 black and white images and corresponding buttons that toggle them to color when clicked. The problem arises when I click one button after another - the previousl ...

javascriptjqueryjquery-ui

Automatically choose an item from the dropdown list using Dropdownlistfor selection

I am working with a dropdownlistFor in a partialview like this <div class="col-md-12"> Refer To: @Html.DropDownListFor(m => m.SenderPosition_Id, ViewBag.senderPositionsList as SelectList, "--Select--", new { @class = "form-control" }) < ...

jqueryasp.net-mvcrazormodel-view-controller

Incorporating both an X button and hamburger menu is essential in my Bootstrap design, especially since I am working with React.js

Currently, I am working with the most recent version of Bootstrap and aiming to switch between the recognizable X icon and a hamburger menu. It seems like these two icons are overlapping each other, and I'm unsure if I can modify the default 3 lines o ...

cssreactjsbootstrap-4

Retrieving the Checkbox Selection from a Grid View and Passing it to the Controller

Within a grid, there is a foreach statement that includes an HTML input checkbox column. The issue at hand is that although the rows and grid populate correctly, the checked checkboxes are not being passed into the controller as part of the Model. Here is ...

jqueryasp.net-mvcasp.net-mvc-4razorcheckbox

The Font Awesome icon is not displaying on top of the Materialize CSS progress/determinate bar

I am struggling to display a Font Awesome icon on top of a Materialize CSS progress/determinate div. Unfortunately, the icon is not fully visible and part of it gets clipped or hidden. Despite trying various solutions, I have not been successful. .progres ...

cssfont-awesomematerialize