Maintain the original proportions in a thumbnail photo

When creating thumbnails for my blog, I typically use a size of 100 * 60. But there are times when I want to use square images instead.

Is there a way to adjust the size using a Wordpress plugin or CSS so that it maintains the original image ratio by adding background in the sides?

For example:

  1. Original image size : 120 x 120
  2. Adding extra white/transparent background to make it fit the thumbnail ratio : 200x120 by adding 40 pixels on both the right and left of the original image to center it
  3. Then reducing the image size from 200*120 to 100*60.
csswordpressimage

Answer №1

To display the image as a background for the thumbnail element, simply apply background-size: contain; to prevent it from exceeding the container boundaries. Check out this example on jsfiddle.

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

Ways to select a single checkbox when other checkboxes are selected in JavaScript

var select_all = document.getElementById("select_all"); //reference to select all checkbox var checkboxes = document.getElementsByName("testc"); //retrieving checkbox items //function to select all checkboxes select_all.addEventListener("change", function ...

javascriptjqueryhtmlcss

Customizing the appearance of input range in Firefox

I am having trouble styling the HTML input range element. I have successfully styled it for webkit browsers, but my styling does not seem to work on -moz- browsers. I attempted to use pseudo elements before and after on moz-range-thumb, but it seems that F ...

htmlcss

Issues with the rendering of Helvetica Neue Condensed in CSS on macOS are causing display problems

It has come to my attention that the font Helvetica Neue Condensed is not being rendered properly on macOS. In fact, as shown in the image below, macOS fails to center the font in relation to the line-height. Based on my tests, this issue seems to be syste ...

cssmacosfonts

Expanding list - Using individual toggles to expand and collapse multiple list items

I stumbled upon an interesting jquery script that allows for a collapsible sub menu within a list. After implementing this code: $('.menu-item-has-children').prepend('<a id="fa-menu" href="#"><i class="fa fa-plus"></i>< ...

javascriptjquerywordpressslidetoggle

Basic inquiry: Constructing a CSS page design

I'm a bit clueless when it comes to CSS and web design, so bear with me as I ask a potentially silly question. How do I go about arranging elements horizontally on a webpage? Currently, the dashed 'p' box is positioned below the empty &apos ...

htmlcsslayout

Exploring the Layout Options of Twitter Bootstrap 3

Can someone help me achieve this specific layout design using Bootstrap 3? --------------------------------------------------------- | | | | | ...

csstwitter-bootstrap

Is there a way to trigger a modal popup when hovering over a Bootstrap 5 card?

After coming across a handy template online, I decided to implement a modal pop-up feature when hovering over cards using Bootstrap 5. Here's what I have so far: class SavedEpisodes extends Component { $(function() { $('[data-toggle=&qu ...

javascripthtmlcssreactjsbootstrap-5

What steps should I take to prevent my <mat-card> from expanding whenever messages are shown in Angular 9?

I have a <mat-card> containing a login form on my page. However, when error messages are displayed, the vertical size of the <mat-card> changes and I need it to remain the same. Is there a way to prevent this from happening? Below, you will ...

cssangularbootstrap-4angular-materialng-bootstrap

What could be the reason for the logo pushing the content further away from the top of the page?

Greetings for checking out my inquiry. I have created a WordPress theme and integrated live logo customization using PHP (Although I suspect this might be an HTML/CSS issue). Let me show you how the logo appears: https://i.sstatic.net/nDBvJ.png At the t ...

phphtmlcsswordpress

Prevent scrolling while popup is open

I found a helpful tutorial online for creating a jQuery popup (). However, due to my limited understanding of jQuery, I'm having trouble getting it to meet my needs. The issues I'm facing are: I need to prevent the webpage from scrolling when ...

javascriptjqueryhtmlcss

How can I dynamically update the content of the right side of the side navbar by clicking on navbar links?

I have a side-navigation bar with content on the right side. How can I display specific content on the right side when clicking on a navigation link? For example, only show the name when clicking on the name link and only show the password field when click ...

javascripthtmlcssbootstrap-5

The COREUI sidebar toggler and dropdown feature seems to be malfunctioning

I need to make some changes to the sidebar provided by COREUI 4.x theme. Here is the code for my sidebar <div class="app-body"> <div class="sidebar"> <nav class="sidebar-nav"> <ul class="n ...

htmlcssangularbootstrap-5core-ui

Using React to showcase images retrieved from an API request

I am attempting to display images retrieved from an API call. However, I am encountering the following error: Uncaught Error: Cannot find module '""' When I try without using require, no warning is shown, but nothing gets rendered on the page. ...

reactjsimagewebpack

Tips for aligning the navigation bar in the center

I recently came across a simple tutorial on w3schools (article) for creating a responsive menu. However, I've been struggling to center it horizontally for the past few days. Here is the HTML code: <ul class="topnav"> <li><a href=" ...

cssmenualignmenthtml-listscenter

On some mobile devices, the links and icons coded in the backend are not appearing as expected

UPDATE: After suspecting an issue with fontawesome, I decided to switch the icons to plain text: <a href=\"javascript:void(0)\" onclick=\"expandMenu($(this))\" class=\"show-second-level toggle\"><span>V</span& ...

javascriptandroidcssmobilerepeater

Changing the color of a progress bar in Bootstrap based on a specific percentage level

var elem = document.getElementById("progress-bar"); var progress = 75; elem.style.width = 80 + '%'; if (progress > 80) { elem.style.background = "red"; } #myProgress { height: 5px; } #progress-bar { w ...

javascripthtmlcsstwitter-bootstrapprogress-bar

Random freezing issue while sending mass mailings via AJAX calls

Running a WordPress plugin to send up to 3,200 newsletters every week to our subscribers has been efficient, but we've been facing occasional freezes. The issue arises unpredictably, sometimes after 800 mails, sometimes after 1,200 mails. Our current ...

jqueryajaxwordpressmassmail

What is the best way to combine node-sass and sass-autoprefixer in a project?

I'm struggling to implement the code in my package.json. Here is the code snippet: { "name": "nodesass", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "node-sass": "^4.11.0" }, "devDependencies": ...

javascriptcssnpmsasspackage.json

Leveraging the :checked state in CSS to trigger click actions

Is there a way to revert back to the unchecked or normal state when clicking elsewhere in the window, after using the :checked state to define the action for the clicked event? ...

htmlcss

Is it possible to maintain the x-axis in a fixed position while scrolling with d3.js?

I am working with a d3 matrix that has both an x and y-axis. However, my y-axis is quite long, so I want to ensure that the x-axis remains visible even when scrolling. I have tried setting the position attribute to 'fixed' using .style("position" ...

javascripthtmlcssd3.jssvg