A completely css-based interpretation of google images

I am in the process of trying to recreate the layout found in Google Photos and stumbled upon this intriguing page https://github.com/xieranmaya/blog/issues/6 . I am particularly interested in the final result of the project, which can be viewed here: . Upon inspecting elements on the page, one specific line caught my attention:

<div ng-repeat="img in imgs" style="flex-grow:70.57291666666667;flex-basis:169.375px;" class="ng-scope">

  <img ng-src="stock-photo-34598868.jpg" src="stock-photo-34598868.jpg">
</div>

My main question revolves around the calculation method employed to determine the values of flex-grow and flex-basis used by the developer, given that this is not explicitly covered in the tutorial. Can you shed some light on this?

htmlcssflexbox

Answer №1

In this demonstration, I am using jQuery to replicate the flex grow effect found in the Angular version.

$('img').each(function() {  //Iterate through all images
var img = $(this);

//Apply flex settings
img
    .css('flex-grow', img.width() * 100 / img.height())
    .css('flex-basis', img.width() * 240 / img.height() + 'px');
});

Check out the Fiddle here!

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

As soon as I hit the submit button on my website form, the URL is automatically refreshed with the information I provided

I am a beginner when it comes to forms and recently copied and pasted this login snippet code: <div class="login-form-1"> <form id="login-form" class="text-left"> <div class="main-login-form"> <div class="login-group"> ...

javascriptjqueryhtmlcss

Interactive Map Displayed within a Pop-up Window

Recently, I developed a custom Google map where points are plotted and an HTML popup window appears when the image is clicked. Now, my goal is to open a file with JavaScript functions inside a lightbox/fancybox when a user clicks on an image. Below is th ...

javascriptjqueryhtmlgoogle-mapslightbox

Exploring the Power of Selenium in Python: Automating the Clicking of Expand Links Without Identifiers

Struggling to fill out a form in IE9 using Selenium and Python. The form is loaded with 'Expand/Collapse' links, all identical except for the text labels. No ID on them, just 'style' and 'onclick' attributes (though there migh ...

pythonhtmlseleniumexpand

jQuery inadvertently removes hyperlinks from the page

Here's the jQuery code I'm currently using: function getUrlParameter(name) { var pageURL = window.location.search.substring(1); var URLVariables = pageURL.split('&'); for (var i = 0; i < URLVariables.length; i++) { ...

jqueryhtml

What is the best way to use AngularJS to extract values from the first dropdown menu that are linked to the values selected in the second

How can I link values in two dropdowns using AngularJS? Hello everyone, I have set up two dropdown fields in MyPlunker and within the ng-option tag, I have applied a filter like filter:{roles: 'kp'} to only display users with the role of kp. T ...

htmlangularjsmeanjs

Drift above a pair of elements

Explaining my issue is a bit complex, so I'll provide an example: I aim to place a floated element (the blue box) over two other elements (red and green), all within a fixed-width and centered layout (achieved by the black border box). Additionally, ...

htmlcssxhtmlinternet-explorer-6css-float

Access the HTML file through the Heroku Bash terminal

After deploying my Flask python application on Heroku, I encountered an issue with one line of my python code where I need to open an HTML file for some javascript to execute. While it works fine locally on my Mac, Heroku seems to have trouble recognizing ...

pythonhtmlbashherokuheroku-cli

Is it Necessary to Create a Separate Stylesheet for This, And if so, How Should it be Implemented? (Using PHP

Creating a customized WordPress options panel is an essential task. One of the key functionalities it offers is allowing users to select their preferred colors. To achieve this, I currently follow a method where I utilize a default stylesheet and then appl ...

phpcsswordpressheader

How can I ensure that the AppBar background color matches the color of the navigation bar?

Having trouble changing the background color of the <AppBar> in my project. Using the Container component to set a maximum screen size, but encountering issues when the screen exceeds this limit. The AppBar background color appears as expected while ...

javascriptcssreactjsmaterial-ui

Tips for incorporating IntersectionObserver into an Angular mat-table to enable lazy loading功能？

I am looking to implement lazy loading of more data as the user scrolls down the table using IntersectionObserver. The container I am using is based on the Bootstrap grid system. However, despite using the code below, the callback function is not being tri ...

htmlangularangular-materialangular-material-table

Easy selector for choosing jquery css backgrounds

Here is a simple background selector that I created. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <hea ...

javascriptjquerycss

Transitioning the Background Image is a common design technique

After spending hours trying to figure out how to make my background "jumbotron" change images smoothly with a transition, I am still stuck. I have tried both internal scripts and JavaScript, but nothing seems to work. Is there any way to achieve this witho ...

javascripthtmlcssbootstrap-5

What is the best way to create three buttons for selecting various parameters?

I have a code snippet where I want to assign different parameters to each button when clicked. However, despite my logic, the functionality is not working as expected. Can someone help me with the correct syntax? For example, if I click the "Start (Easy) ...

javascripthtmlbutton

Unable to delete a dynamically inserted <select> element by using the removeChild method

As someone who is new to coding web applications, I am currently working on a project that involves adding and deleting dropdowns dynamically. Unfortunately, I have run into an issue where the delete function does not work when the button is pressed. Her ...

javascripthtmlcssremovechild

Using the KnockOut js script tag does not result in proper application of data binding

Being new to knockout js, I found that the official documentation lacked a complete html file example. This led me to write my own script tags, which initially resulted in unexpected behavior of my html markups. Strangely enough, simply rearranging the pos ...

javascripthtmlknockout.js

Measuring Time Passed with JavaScript

I've been working on a small piece of code that needs to achieve three tasks: User should input their birthday User must be able to view the current date When the user clicks a button, they should see the time elapsed between their birthday and the ...

javascripthtml

Scripting method to transfer multiple subdirectories using a cpanel.yml file (excluding the use of the wildcard)

I have been referring to the documentation found at My current issue is that when I try to copy my subfolders, it doesn't work properly unless I use a workaround. The only way I am able to achieve the desired outcome is by utilizing the following co ...

htmlbashgityamlcpanel

Listening for JS events on a CSS class called "int-only" which only accepts

Having an issue: I'm encountering a problem with this PHP code: <?php for($i = 0; $i < sizeof($floating_ips_json["floating_ips"]); $i++){ ?> <tr class="details-control-<?php echo $i; ?> cursor-pointer"> <t ...

javascriptphpcss

Toggle the visibility of all elements using jQuery by creating multiple buttons for each action

I have a group of 4 buttons that control the visibility of images on the page. Each button toggles between showing and hiding all images when clicked. When a button is clicked, it changes its text from "HIDE ALL" to "DISPLAY ALL." The issue I'm facin ...

javascripthtmljquerybutton

The image fails to load once the AI-generated image is complete and the response process has concluded

After a long hiatus from development, I am diving back in and acknowledging the rustiness of my skills. Any syntax or formatting errors encountered are preemptively apologized for. Currently, I am immersed in a small web app project that involves taking a ...

pythonhtmlformsflaskartificial-intelligence