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

Currently, this is what I have:

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

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:

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

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

Accessing Django ManyToManyField via Ajax using its ID

Here are my models: class Topping(models.Model): name=models.CharField(max_length=24) class Pizza(models.Model): toppings=models.ManyToManyField(Topping) Now, onto the views: def get_pizza(request): if request.is_ajax(): pizza_list= ...

javascriptajaxdjangomany-to-many

The route is redirecting to an incorrect destination

Whenever a button is clicked on my webpage, this particular function is triggered. $scope.go=function(takenAt){ var path = '/oneMinuteMetric/loadCapturedMetrics?'+'&timestamp=' + takenAt + '&tagName='+ $stateParam ...

javascriptangularjs

Unlocking the Secrets: Javascript Tricks for Retrieving Object Values

I have an item that contains data which I need to display. {"text": "active user active user213123 idle user234234234 loggedout userafdadf" }, To extract the content, I used the following code: Response = message.s ...

javascript

When attempting to access /test.html, Node.js server returns a "Cannot GET"

Embarking on the journey of diving into Pro AngularJS, I have reached a point where setting up the development environment is crucial. This involves creating an 'angularjs' directory and placing a 'test.html' file in it. Additionally, o ...

javascriptnode.jsangularjs

Enhance the appearance of CodeMirror substrings by applying bold formatting without altering

I am currently utilizing codemirror with primefaces extensions in XML Mode. I need to modify the font style of a specific substring to make it bold. For instance, <User> <Name>Micheal</Name> <Age>25</Age> <Addr ...

javascriptprimefacescodemirrorprimefaces-extensions

Tips for explaining the structure of a basic Just functor in TypeScript

I am embarking on my first attempt to create a simple interface in TypeScript, and I find myself questioning every step along the way. The core question that troubles me is: How can I best describe this straightforward Jest matcher extension? /** * @par ...

javascripttypescriptvisual-studio-codejestjstypescript-typings

Guide to retrieving a string value rather than Json output with a mongodb aggregate function

I have a function that retrieves the value of the 'minHospitalization' field from the database. The response from this function is '[{"minHospitalization":1}]' Instead of returning the value in JSON format, I want to return just ' ...

javascriptnode.jsmongodb

Steps to troubleshoot the TypeError: cv.Mat is not a constructor in opencv.js issue

Encountering a problem while trying to use opencv.js for detecting aruco markers from my camera. Each time I attempt to utilize the method let image = new cv.imread('img'); An error keeps popping up: TypeError: cv.Mat is not a constructor ...

javascripthtmlopencvvue.js

Error injecting angular.bootstrap in Angular 1.6.5 version

I have a MeanJS.org skeleton app that I've transformed into hapi-js from express, switched to postgres from mongo, and incorporated OAUTH for authentication (mainly because I liked the server/client module folder structure - haha). Everything seems t ...

javascriptangularjsangular-ui-routermeanjs

Interacting with APIs in Svelte applications

I'm fairly new to utilizing Svelte and JavaScript. I've been attempting to construct a page that incorporates numerous API components from external websites, but I'm facing some challenges. I'm uncertain about where exactly to place the ...

javascriptsveltesapper

Converting Hexadecimal Values to Base32-Encoding Using Javascript

I'm encountering a problem with converting a function from Ruby to Javascript (specifically node.js, but I prefer a solution that is compatible with browsers, if possible). Here is the hex-formatted sha256 digest: "0b08dfe80a49490ae0722b9306ff53c5ab ...

javascriptnode.js

How to toggle two classes simultaneously using JQuery

Check out this code snippet: http://jsfiddle.net/celiostat/NCPv9/ Utilizing the 2 jQuery plugin allows for the following changes to be made: - The background color of the div can be set to gray. - The text color can be changed to red. The issue arises wh ...

javascriptjqueryhtmlcss

Having trouble with Node.js GET request functionality not functioning properly

I've been encountering difficulties with loading a page using Node.js. While my Node.js Application code functions properly when attempting to load other resources such as www.google.com, it seems to encounter issues specific to the domain name www.eg ...

javascriptnode.jshttpcurlhttprequest

What methods are available for populating bootstrap columns dynamically with the use of jquery, php and smarty templating?

I am currently working on developing a dynamic news article module that needs to resemble the layout of a traditional newspaper article. The height of the news article must be restricted based on the size of the current view port. All information for the a ...

phpjqueryhtmltwitter-bootstrapsmarty3

Detecting changes in URL hash using JavaScript - the ultimate guide

What is the most effective method for determining if a URL has changed in JavaScript? Some websites, such as GitHub, utilize AJAX to add page information after a # symbol in order to generate a distinct URL without having to refresh the page. How can one ...

javascriptajaxfragment-identifier

Is PHP-generated HTML not responding to external Javascript?

I have been attempting to create a form where, upon checking a checkbox, the onClick() event will enable a select option. Below is my PHP code: function generateOption() { for($x = 0; $x < 10; $x++) { echo "<option value='".$x."'> ...

phpjavascriptonclick

How to implement a form in PHP that doesn't refresh the page upon submission

I am having an issue with this ajax code. I know it works, but for some reason it's not submitting. <script type="text/javascript"> $(function(){ $('input[type=submit]').click(function(){ $.ajax({ type: "POST", ...

javascriptphpjqueryajaxforms

Embarking on the journey of transitioning code from server-side to client-side

Currently, I am looking to transition the code behind section of my asp.net web forms application to client-side ajax or javascript - still deciding on which route to take. The main goal for this change is to ensure that the application remains functional ...

javascriptasp.netajaxhtml

The Bootstrap 4 dropdown seems to have a one-time use limit

I'm currently working on a dropdown menu using Bootstrap 4. The dropdown menu is functional, but I'm facing an issue where it only toggles once. I have tried various solutions recommended on different websites, but none of them seem to work. Belo ...

htmljquerycssbootstrap-4responsive-design

Using knockout to retrieve the attribute value with an onClick event

Snippet of HTML View with attribute value 'Qref'. This is the sample HTML Code for binding Currently, I have manually inputted the Qref Attribute value <!--ko if:$parent.Type == 2 --> <input type="checkbox" data-bind="attr:{id: $data ...

javascriptjqueryknockout.js