Ensuring uniformity in picture size while uploading images in Angular by resizing and including white borders

Question

Ensuring uniformity in picture size while uploading images in Angular by resizing and including white borders

Currently, I am working with pictograms and I am looking to showcase all the pictograms that the user has in both grid list and grid tiles formats. However, the challenge lies in the fact that the aspect ratio of the pictograms varies significantly depending on the specific image. https://i.sstatic.net/RdleM.png To address this issue, I am currently using ng2-img-max to resize the pictograms while preserving their original ratio. While I am fairly new to CSS, I have attempted some solutions like setting max-width to 80% and experimenting with different approaches. Nevertheless, I believe that the optimal solution would involve adding white borders to the pictograms to standardize them to a 300px*300px dimension, making it easier to manage their display.

html css angular

Answer 1

Answer №1

I stumbled upon an excellent tutorial about creating responsive layouts using CSS grid which I personally found very helpful.

<div class="grid-container" fxFill>

  <div>
// INSERT ANY CONTENT HERE -- TILE 1
  </div>

  <div>
// INSERT ANY CONTENT HERE -- TILE 2
  </div>

  <div>
// INSERT ANY CONTENT HERE -- TILE 3
  </div>

</div>

Here is the SCSS code for that:

.grid-container {
  display: grid; // sets display to grid
  width: 100%; // fills the container's width
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); 
  padding: 0px; // personal preference
  grid-column-gap: 30px; // personal preference
}

The key part here is the 'grid-template-columns` property. You can learn more about its different settings here.

Answer 2

I stumbled upon an excellent tutorial about creating responsive layouts using CSS grid which I personally found very helpful.

<div class="grid-container" fxFill>

  <div>
// INSERT ANY CONTENT HERE -- TILE 1
  </div>

  <div>
// INSERT ANY CONTENT HERE -- TILE 2
  </div>

  <div>
// INSERT ANY CONTENT HERE -- TILE 3
  </div>

</div>

Here is the SCSS code for that:

.grid-container {
  display: grid; // sets display to grid
  width: 100%; // fills the container's width
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); 
  padding: 0px; // personal preference
  grid-column-gap: 30px; // personal preference
}

The key part here is the 'grid-template-columns` property. You can learn more about its different settings here.

Ensuring uniformity in picture size while uploading images in Angular by resizing and including white borders

Answer №1

Similar questions

Reconfigure an ancestral item into a designated key

What is the reason for the image not being positioned in the top left corner of the html page?

The marquee HTML code is not functioning correctly in the Chrome browser

Navigational Menu in PHP

Tips for creating a unit test case for a specialized validator in angular reactive forms

Switch between two AppBars simultaneously while scrolling in Material UI

Effective RxJS Subscription Management - Minimize Unnecessary Subscriptions

Issues with HTML5 tag <animate> in Internet Explorer 11

The art of positioning images and creatively cropping

How can I adjust two overlapping divs for proper display?

What are some effective strategies to ensure my header is aligned properly on both mobile and desktop platforms?

What is the best way to activate the cube portfolio using custom jquery?

Troubleshooting issue with Angular2 Dart ngFor not refreshing view with WebSockets data stream

Guide to expanding the sidebar width

The age-old debate: Ngxs or Behavior Subject, which one should you go

How can I eliminate padding from events in FullCalendar's timeGrid view?

What is the best way to customize CSS in Material UI?

What could be causing the images to not display on my HTML page?

Obtain the Vertical Dimension of an HTML Element using

Receiving a null value when attempting to access the ids of dynamically created HTML elements using JavaScript