I have a large collection of resized images (around 100) that are all either 130 pixels wide or 130 pixels high. I'm looking for a way to style these images so that they appear perfectly centered within a background box that is also 130x130 pixels.
The desired outcome can be seen in this example image: https://i.sstatic.net/5NcIh.png
Here is an alternative approach that differs in two main ways: it avoids using background images (which can be semantically confusing as noted by Nightfirecat) and organizes the images in an unordered list. While not essential, this method arguably aligns with CSS best practices.
I have only tested this on recent versions of Firefox, Chrome, and IE for PC. I had to implement a workaround for IE7 based on recommendations from this webpage. This explains why each list item has an empty <span>.
CSS:
<style type="text/css">
#boxes {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
}
#boxes li {
float: left;
border: 1px solid #333;
margin: 30px;
}
#boxes li div {
position: relative;
width: 130px;
height: 130px;
text-align: center;
display: block
}
#boxes li div img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto
}
</style>
<!--[if IE 7]>
<style type="text/css">
#boxes li div * {
vertical-align: middle;
}
#boxes li div img {
position: relative;
}
#boxes li div span {
display: inline-block;
height: 100%;
}
</style>
<![endif]-->
HTML:
<ul id="boxes">
<li><div><span></span><img src="wide1.jpg"></div></li>
<li><div><span></span><img src="wide2.jpg"></div></li>
<li><div><span></span><img src="wide3.jpg"></div></li>
<li><div><span></span><img src="tall1.jpg"></div></li>
<li><div><span></span><img src="wide4.jpg"></div></li>
<li><div><span></span><img src="tall2.jpg"></div></li>
</ul>
This was done quickly, so there may still be some bugs present.
Utilizing these images as backgrounds for a div is the perfect solution:
CSS:
div.image-boxes div {
float: left; /* aligns them to the left */
height: 130px;
width: 130px;
margin: 12px; /* creates space between them */
background-position: 50% 50%; /* centers the image */
background-repeat: no-repeat;
border: 2px solid #ccc;
}
HTML:
<div class='image-boxes'>
<div style='background-image: url(images/sample1.png);'></div>
<div style='background-image: url(images/sample2.png);'></div>
[etc.]
<br style='clear: both;' />
</div>
In my opinion, I prefer not to use background images for this purpose.
Instead, consider assigning a specific class to each container that contains these images with preset height and width dimensions, just like you mentioned.
Utilize jQuery or JavaScript to dynamically add classes based on the image's dimensions. For example, add padding classes to accommodate different widths and heights of the images.
I hope this explanation clarifies things for you and proves helpful. Feel free to reach out if you need further clarification.
Although my testing was limited to fx, chrome, and IE9, you can achieve vertical alignment on an image by using vertical-align: middle along with line-height: 130px.
Here is the CSS code:
div.box {
width: 130px;
height: 130px;
text-align: center;
line-height: 130px;
}
div.box img {
vertical-align:middle;
}
And here is the HTML code:
<div class="box">
<img src="image1.jpg">
</div>
<div class="box">
<img src="image2.jpg">
</div>
I have noticed a slight shifting issue when the image matches the box's height. Does anyone know why this happens? You can view it in action here: http://jsfiddle.net/9bu5Z/1/
I'm looking to hide all the li elements except for the one with a specific index. I've written some code to achieve this, but I'm wondering if there's a simpler way using jQuery. While jQuery provides methods like eq, gt, and lt, there ...
It is necessary to incorporate the functionality of "save" and "cancel" in the JSP code for this particular form. By selecting "save", the data entered into the form will be submitted to its intended destination. Alternatively, choosing "cancel" will dismi ...
Recently, I encountered a puzzling situation: I have an element with the following CSS properties ($(this) represents the cloned object): clone.css({ 'width': $(this).width() + 'px', 'height': $(this).height() + ' ...
As I work on my website, I encounter the need for a cursor that smoothly changes its color. Specifically, I want the cursor to appear blue (#0059ff) when hovering over a white background and white when over a blue background, with a seamless transition lik ...
Is there a way to add a border-bottom-image (such as an arrow with 159px width) without affecting the width of the <li> element? I'm facing an issue where setting the width of the <li> to 159px causes layout problems with other elements. ...
Looking to center-align only the first column named "Status": $("#TransactionTable").DataTable({ ajax: { url: '/Transaction/SearchMockup', type: 'POST', data: { ...
Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...
I am interested in revamping sections of Wikipedia articles and integrating them into a mobile application. My attempt to use http://en.wikipedia.org/w/api.php?action=parse&format=json&page=New_York resulted in the JSON files containing Mediawik ...
Hey there! I'm currently working on a website that allows users to post content. I want to ensure that the site is mobile-friendly, so I need to make some adjustments with media queries. Unfortunately, I've run into an issue where media query CS ...
Below is an example of a basic table: table, th, td { border: 1px black solid; border-collapse: collapse; } <table> <tr> <th>number</th> <th>name</th> <th>id</th> </tr> <tr&g ...
I'm facing an issue where scrolling to the next element is not working properly. When I click on the next element, it moves there but does not scroll down automatically. I have tried various solutions but have been unsuccessful so far. If anyone can p ...
Imagine having a definition list with multiple sets. Here's an example: <dl> <dt>Colors <dd>Red <dd>Blue <dt>Shapes <dd>Circle </dl> Now, what if you want these definitions to be displayed horizon ...
According to documentation: The width of the image, in pixels. Must be an integer without a unit. The height of the image, in pixels. Must be an integer without a unit. https://nextjs.org/docs/api-reference/next/image Different devices come in various ...
I believe the body element should apply styles to all elements contained within it. In this scenario, I am attempting to give my h1 element a margin of 0. body { font: 15px/1.5 Arial, Helvetica, sans-serif; padding: 0; margin: 0; background ...
Visit Material-UI documentation for Slider component. Despite setting the disabled flag for the entire slider, the thumb continues to show a halo effect when clicked. ...
Creating a unique 'block' element on a webpage named 'test-div' has been quite the challenge. Adding an additional class to test-div changes the background color, such as: test-div test-div-bg-bright-gold test-div test-div-bg-dark-blu ...
I am currently working on a webpage at . I have set the body and html to 100% height, as well as #site_main with a height of 100%. However, I am facing an issue where the #footer is not sticking to the bottom on screens with higher resolutions, leaving som ...
In a div within the body, there are only 3 lines of text. The background color was only filling up to those 3 lines of text. To make the color fill up the entire vertical space of the browser, I adjusted the CSS height properties of html & body to be ...
I have successfully stacked two sections on top of each other. To achieve this layout, I utilized position:relative on the parent container div and then employed position:absolute on the child divs to align them based on the parent container's top pos ...
https://i.stack.imgur.com/9lumC.png Is there a way to create an hr line that looks exactly like the image above? I attempted using clip-path: polygon(0 20%, 0 100%, 100% 100%, 100% 0%, 5% 0) but it didn't work .divider { color:#1D0000; ...