What is the proper way to showcase thumbnails in different sizes?

Currently, this is what I have:

The display looks optimal with high-resolution landscape photos.

This is the HTML and CSS code in use:

<div class="upload-thumb ng-scope visible">
    <span class="delete-media">
      <span class="icon-bin">
        </span>
    </span>
    <img src="">
</div>

.upload-thumb {
    cursor: pointer;
    overflow: hidden;
    float: left;
    width: 44%;
    /* height: 72px; */
    margin: 0 11px 10px 0;
    position: relative;
}

.upload-thumb img {
    width: 100%;
    height: inherit;
}

If the fixed height is removed, here's how it appears:

The images are not scaled. How can I keep them unscaled yet contained within a fixed size container like in the initial setup? Although some parts of the image may be cropped, I am fine with that. Any suggestions on achieving this?

javascripthtmlcss

Answer №1

To achieve this effect, you can utilize CSS with the overflow property set to hidden. Define the desired scale dimension for the image width and specify the cropping dimension for the containing div with overflow hidden. Here is an example on Plunkr: https://plnkr.co/edit/UiqYrbNcDazOpwGh6fyT?p=preview

CSS Code:

.thumbnail {
  width: 250px;
  overflow: hidden;
}
.thumbnail img {
  height: 150px;
}

HTML Structure:

<div class="thumbnail">
  <img src="https://www.example.com/image.jpg" />
</div>

Alternatively, you can also use background images along with positioning and sizing properties. For more information on both techniques, refer to this informative article: How to automatically crop and center an image

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

Transferring a row name from PHP to AJAX using jQuery - the complete guide

In my current project, I have a table that displays details fetched from the database. if(mysql_num_rows($sql) > 0) { $row_count_n = 1; while($rows = mysql_fetch_assoc($sql)) { extract($rows); $options1 = select_data_as_options( ...

javascriptphpjqueryajax

Can we achieve live map updates in real time using Google API with Node.js technology?

Can Google Maps API in conjunction with Node.js provide truly real-time updates on a map without any callback limits, or does Google enforce restrictions such as a 5 second or 30 second time frame? Node.js is known for its ability to handle almost real-ti ...

javascriptnode.jsgoogle-mapsmeteorjavascript-framework

Enhancing HTML through Angular 7 with HTTP responses

Sorry to bother you with this question, but I could really use some help. I'm facing an issue with updating the innerHTML or text of a specific HTML div based on data from an observable. When I try to access the element's content using .innerHTM ...

javascriptangulartypescript

The syntax for importing JSON in JavaScript ES6 is incredibly straightforward and

Whenever I attempt to write my code following the ES6 standard and try to import a .json file, it ends up failing on me. import JsonT from "../../Data/t.json" //not functioning as expected var JsonT = require('../../Data/t.json'); //works fine ...

javascriptjsonreactjswebpack

Tips for altering the color of a specific bar in the Material UI BarChart component

I have implemented the following code to generate a Graph: const namesArray = Object.values(tableData).map(item => item.name); const valuesArray = Object.values(tableData).map(item => item.value); return ( <Box> <SimpleCard ti ...

javascriptreactjschartsmaterial-ui

Is there a way to dispatch an event from one Angular ui-router view to another view?

In order to change the login button to display "logged in as xxx" after authentication, I have structured my page into three views: header, content, footer. The login button is located in the header view. Upon clicking login, it transitions to the "app.log ...

javascriptangularjsangular-ui-router

Building modals with Bootstrap

Currently, my website is built using Bootstrap, JQuery, HTML, and CSS. I am looking to enhance the user experience by incorporating a modal output feature. The idea is that when a user clicks on a specific hyperlink, a modal window will open displaying t ...

jqueryhtmlcssbootstrap-modalsimplemodal

AngularJS's angular.element is currently accessing the current Document Object Model

While experimenting with angular.element, I was curious about accessing the current DOM from an ng-click event. Is there a way to do this? For example: <div ng-click="angular.element(curElement).parent()..."></div> How can I retrieve the cur ...

javascriptangularjs

Subtracting 25% from the width of the web browser

After spending some time trying to solve this issue by myself, I've decided to reach out for help here where I know I can get some great responses. I am looking to determine the dimensions of the browser window minus 25%. Specifically, I have a two-c ...

javascriptjquerymath

Struggling to master YAML integration with Google App Engine?

Seeking assistance with YAML as I am new to it: application: baking-tutorial version: secureable runtime: python27 api_version: 1 threadsafe: true handlers: - url: /robots\.txt static_files: static/robots.txt upload: static/robots\.txt - url: ...

javascriptyaml

Creating a function in Angular to locate each object based on its ID

Hello there, I am currently working on creating a method called findChildByIdInData(data:any, childId:string). This method will take in a JSON main node with children that have unique IDs, and the goal is to find a specific object based on the ID provided ...

javascriptjsonangular

The operation to remove the child element could not be completed

var first_content = document.getElementById('first-content'), offered_games = document.getElementById('offered-games'); for(var i = 0, e = offered_games.children; i < e.length; i++) { e[i].onmouseenter = function() { var ...

javascript

CSS vertical text not functional as expected

Trying to make some text vertical, here is the CSS I'm using: h2.verticle{ color:#1a6455; border:0px solid red; writing-mode:tb-rl; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -webkit-transform:rotate(90deg); -moz-transform:rota ...

css

JavaScript Age confirmation Overlay

I designed an age verification popup with the help of some online tutorials and a friend due to my limited knowledge of JavaScript. Check it out live here- My issue is that I want this popup to load/appear after the page content loads, but I'm not s ...

javascriptjqueryhtmlcss

Initiate an AJAX request within an existing AJAX request

On one of my pages, page A, I have a form that passes parameters to a script using AJAX. The results are loaded into div B on the same page. This setup is functioning properly. Now, I want to add another form in div B that will pass parameters to a differe ...

javascriptphpjqueryajax

The tooltips on a resized jQuery Flot chart are displaying in the incorrect location

Currently, I am utilizing the flot library for my chart. I am facing an issue with getting the correct tooltips to display when I scale the chart using this CSS rule: transform: scale(0.7); The flot source relies on the function findNearbyItem to locate ...

javascriptjqueryflotflot.tooltip

Creating a worldwide object in JavaScript

I am trying to create a global object in JavaScript. Below is an example code snippet: function main() { window.example { sky: "clear", money: "green", dollars: 3000 } } However, I am unable to access the object outside th ...

javascriptnode.jsobjectglobal

Utilizing AJAX and PHP to refresh information in the database

For my project, I need to change the data in my database's tinyint column to 1 if a checkbox is selected and 0 if it is deselected. This is the Javascript/Ajax code I have written: <script> function updateDatabaseWithCheckboxValue(chk,address) ...

javascriptphpjqueryajax

What is the optimal method for organizing MongoClient and express: Should the Client be within the routes or should the routes be within the client?

Which is the optimal way to utilize MongoClient in Express: placing the client inside routes or embedding routes within the client? There are tutorials showcasing both methods, leaving me uncertain about which one to adopt. app.get('/',(req,res) ...

javascriptnode.jsmongodbexpress

Incorporate an image icon into an Angular grid

Currently, I am in the process of building a web application using Angular. The main goal is to create a grid and color specific cells based on data input. Below is the snippet of my HTML code: <mat-grid-list cols="10"> <mat-grid-tile * ...

htmlcssangulartypescript