Is there a way to adjust the dimensions of individual pictures?

Dealing with a variety of images within a resizing container can be tricky. I have a solution for adjusting each image to a specific size without affecting the others. Currently, the container's CSS is set to resize images based on browser size:

.contentwrapper {
display: block;
position: relative;
margin:0 auto;
width:90vw;
max-width: 100%;
max-height: 100%;
margin-top: 150px;
}

img {
max-width: 75%;
max-height: 75%;
height: auto;
position: relative;
}

Now, how can we make individual images different sizes? For example, having the first image at max-width: 75% and the second at max-width: 55%, etc.

    <div class="contentwrapper">
    <img 
    src="img/1.%20Generation%20anxiety%20front%20+%20back%20copy2.png">

    <img style="float: right" 
    src="img/2.%20GenerationAnxiety%20page%202,2.png">
    </div>
htmlcss

Answer №1

Have you considered assigning unique class names to each image and specifying their height and width individually?

Answer №2

Utilizing CSS Flexbox is the solution. Check out this helpful Gallery Grid tutorial. I trust it meets your requirements.

Answer №3

Cascading Style Sheets (CSS) provides the flexibility to apply styles to various elements, including:

  • individual tags
  • chains of tags
  • groups of tags
  • tags based on their attributes
  • tags based on their position
  • tags based on their class
  • tags based on their id
  • styles applied inline
  • all of the above with the "!important" declaration for highest priority

When multiple properties are assigned to one element, the one with the highest priority and the last in the CSS declaration takes precedence. Properties marked with "!important" have the highest priority.

To implement formulas, consider using CSS rules in conjunction with JavaScript functions.

An illustrative example demonstrating the logic can be found here: https://codepen.io/anon/pen/PaWNpj

Here is a secondary example:

jQuery("img").each(function(i) {
  var size = 75 - 20 * i;
  if (size < 10) {
    size = 10;
  }
  size = size + "%";
  $(this)
    .css("max-width", size)
    .css("max-height", size);
});

Alternatively, you can achieve the same effect using CSS rules:

img:nth-child(1) {
    max-width: 75%;
    max-height: 75%;
}

img:nth-child(2) {
    max-width: 55%;
    max-height: 55%;
}

img:nth-child(3) {
    max-width: 35%;
    max-height: 35%;
}

img:nth-child(4) {
    max-width: 15%;
    max-height: 15%;
}

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

How to adjust the font size and font style for the [pageSizeOption] in mat-paginator

I am having trouble adjusting the font-size of the [pageSizeOptions] in my mat-paginator element in the application. <mat-paginator [pageSizeOptions]="[10, 20, 30]"></mat-paginator> The "10" appears too small compared to the text "items per p ...

htmlcssangularangular-materialpaginator

Selenium - Struggling to locate elements that are undeniably present on the website

I started a fun side project to automate tasks on the website using Selenium to automatically complete all achievements. You can check out my code on GitHub: https://github.com/jasperan/pyfastfingers However, I've run into an issue with the login pa ...

pythonhtmlseleniumautomation

Arrange elements within a division when the division splits into two rows

Currently in my setup: I have a navigation bar with a group of buttons located on the right-hand side. When the navbar is reduced to a smaller size, like on a smartphone, the two buttons get split across 2 rows within the div. In this state, I'm ai ...

htmlcssbootstrap-5

Aligning forms horizontally using Bootstrap

Has anyone experienced a strange alignment issue with Bootstrap while trying to horizontally align textboxes with a select control? https://i.stack.imgur.com/1tw4P.png <div class="row"> <div class="form-group"> <div cla ...

htmltwitter-bootstrap-3

Basic stacked or segmented bar in HTML

Instead of starting from scratch, I'm in search of insights on how to develop a stacked/segmented bar or find an existing control for this purpose. Here are my requirements: Horizontal bar Standard html Color-coded segments using CSS Segments propor ...

c#asp.nethtml

Creating a dynamic mouse trail effect using CSS and JavaScript without compromising element clickability

I'm looking to create a mouse trail that follows the cursor as it moves, made up of small icons or images that gradually fade out over time. I attempted to achieve this by overlaying a grid on top of all other elements on the page. The grid consists o ...

javascriptcss

Is it possible for an animation to complete even if it is stopped midway?

I am currently working on a media player project where I have implemented a scrolling marquee effect for the song meta information using JavaScript and CSS. The scrolling effect only occurs when the track is playing, and I achieve this by adding/removing ...

javascriptcss

Is there a way to identify if you are at the bottom row of a column defined by CSS styling?

I have implemented the new CSS-style column to divide a single unordered list into multiple columns. Now, I am trying to figure out how to target the last element in each column using JavaScript or CSS. Here is my HTML: <ul> <li /> <li ...

javascriptjquerycss

Is it possible to include more details in the document?

Is it possible to include additional metadata, such as a record ID, within a file without causing corruption? I am looking for ways to add extra information to files. Can anyone offer some guidance? Your help would be greatly appreciated. Thank you! ...

jqueryhtmlfilefile-uploaddata-uri

Enhancing jQuery UI Tabs with HoverIntent

I'm currently working on incorporating HoverIntent into my jQuery tabs, but I seem to be facing some issues. Below is the code snippet that I've been using. Any suggestions or tips would be greatly appreciated. Thank you! The code was sourced di ...

jqueryhtmljquery-uihoverintent

Steps to center the search form in the navbar and make it expand in Bootstrap 5

I'm utilizing Bootstrap v5.1.3 and have included a navbar as shown below: navbar Here is the code for that implementation: <div class="container"> <nav class="navbar navbar-expand-lg navbar-light bg-light& ...

csstwitter-bootstrapnavbarbootstrap-5search-form

moving a simulated element to a new location

Looking for some help with my html/CSS code that creates a unique element at the bottom of a div with an image background. The shape I've created is positioned at the bottom of the div... Below is the HTML: <div style="background-image:url(&apos ...

javascriptjqueryhtmlcss

Error Encountered While Building Flask Application

Whenever I try to submit the form, an error pops up and I can't see the flash message even though it's added to my database: werkzeug.routing.BuildError BuildError: ('/contacts', {}, None) Here are my methods: @app.route('/conta ...

pythonhtmlsqliteflask

Encountering Empty Output When Trying to Save HTML Form Data to Database

I have recently started learning PHP and web development, and I am attempting to build an HTML form that will submit data to MYSQL. After submitting the form and checking phpMyAdmin, it shows that a row has been submitted, but the row is empty. Previously ...

phphtmlmysql

How can I display different divs based on a selected option?

I'm encountering difficulties while attempting to develop the code for this specific task. My goal is to display or hide divs based on the selection made in a select option, with a total of 4 options available. There are 2 select elements <select ...

javascriptjqueryhtmlcss

Unable to view new content as window does not scroll when content fills it up

As I work on developing a roulette system program (more to deter me from betting than to actually bet!), I've encountered an issue with the main window '#results' not scrolling when filled with results. The scroll should always follow the la ...

javascripthtmlautoscroll

Increase the gap between columns in Bootstrap for a better layout

I have implemented a web layout using bootstrap 3. You can view the JSFiddle here. In order to make the layout responsive, I had to structure it in a slightly unconventional way. The final output on small screens includes three information boxes within an ...

htmlcsstwitter-bootstrap

When a PHP-generated child element is clicked, jQuery fails to detect it

I'm currently developing a website where I need to dynamically display buttons based on database content. These buttons, when clicked, should send a request to the database and update the page content accordingly. My approach involves using Ajax and ...

javascriptphpjqueryhtmlajax

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

As a beginner in webpage development, I have a query regarding the technical aspect. Is it possible to utilize variables from a JavaScript function, which is placed either in the head or body of an HTML file, directly in CSS code to make modifications such ...

javascripthtmlcss

Changing the Color Scheme of Twitter BootstrapRevamping the Color Palette

I am interested in updating the color scheme of a website that I modeled after this example: http://getbootstrap.com/examples/navbar/ So far, I have successfully changed the background color of the entire page using: body{background-color:#XXXXXX} Howev ...

htmlcsstwitter-bootstrap