Is it possible for me to adjust these two images to fit the screen perfectly?

Technologies:

  • CSS
  • React
  • JPG/PNG

Objective: I am striving to resize two images to achieve this desired look: https://i.stack.imgur.com/B1b0h.png

I am currently developing a 'skirt customizer' for either my mom or portfolio, where users can modify the 'belt' or 'fabric' by clicking on buttons. The functionality of the buttons is operational, allowing for full customization. However, the current appearance is not up to par: https://i.stack.imgur.com/DLKZF.png

The current design is far from ideal... I have experimented with adding classes (and ids) to both the image and container tags, as well as adjusting various CSS attributes. Attempts have been made using max-height in "px" and/or 10% for the belt, 40% for the fabric. Tinkering with height, width, and max-width has also been part of my strategy in search of the perfect combination. Although the JavaScript portion is successful, I need assistance from someone skilled in CSS to fine-tune these adjustments. Once achieved, I plan to overlay a 'transparent-skirt-frame' over the skirt and belt to enhance the overall appearance. Perfecting the sizing is proving to be quite the challenge. Any help will be greatly appreciated! Thank you!

htmlcssimage

Answer №1

Potential choices:

  1. Place image inside a div with overflow: hidden and adjust width/height as needed, set image width to 100% and height to auto
  2. Utilize a div with a background instead of an img and include background-size: cover in the div's styles

For the first method, it would appear like this

//html
<div class="skirt">
  <div class="part belt"></div>
  <div class="part fabric"></div>
</div>

//css
.skirt {
  height: 500px;
}

.skirt .part {
  overflow: hidden;
}

.skirt .part img {
  width: 100%;
  height: auto;
}

.skirt .belt {
  height: 10%;
}

.skirt .fabric {
  height: 90%;
}

To achieve a "skirt look," you can experiment with adding 

clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
to .skirt (clip-path generator)

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

Styling buttons with different colors using React onClick event.getSelectedItem() method

I am having an issue with adding a border when the class is set to "transportation active" in my React code. When I click on one of the icons, all of them become active instead of just the clicked one. This behavior is not what I want, as I only want the ...

javascripthtmlreactjsreact-hooksfrontend

What is the best way to incorporate media queries in order to reduce the padding around my image?

Currently, I am working on a small gallery and have successfully implemented Salvattore (similar to Masonry). However, a challenge has arisen when resizing the web page - the padding remains at 10px instead of reducing to 5px as desired. The goal is to e ...

cssresponsive-designmedia-queriesscreen-size

The PHP file on my local WAMP server seems to be having trouble retrieving inputs from the HTML's GET or POST methods

<!DOCTYPE HTML> <html> <body> <form action="testrun.php" method="GET"> Name: <input type="text" name="name"><br> E-mail: <input type="text" name="email"><br> <input type="submit"> </form> </bo ...

phphtmlformswamp

CSS Animation glitch with images

I am currently facing an issue with a slide that transitions between four pictures. The slide is set at a specific pace, but I am encountering a problem with the transition from the last slide back to the first one. I have attempted various solutions such ...

htmlcssanimationtransitionslide

Incorporate a variable from an HTML form into PHP for FPDF functionality

How can I retrieve a variable from an "input" element in another HTML file? <input type="text" id="client" name="clientTest" required minlength="1" maxlength="30" size="30"> I need to pass this variable to my PHP file for FPDF. It seems like I hav ...

phphtmlvariablesfpdfvar

Creating a Dynamic Landing Page with Node.js and Express

Recently, I purchased an HTML landing page and am a complete novice in this area... Upon inspection, I noticed there are three distinct folders: /windows /ios /android I'm interested in utilizing nodejs and express to showcase the landing page. Spec ...

htmlnode.jsexpresstwitter-bootstrap-3

Display a text box upon clicking an item

I've been curious about how to create the effect of a text box or div that appears when clicked on, similar to what you see in this. Scroll down and click on "show patchnotes"; I've been puzzled by this for a while but haven't come across a ...

javascriptjqueryhtml

Ensure that the child div remains at the bottom of the parent div

I'm trying to make sure that the subfooter div stays at the bottom of the childbox div like a footer. You can see the code on this jsfiddle link <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title ...

htmlcss

What steps can I take to properly position my child element within its parent container?

Is there a way to adjust the width of a child element so it fits snugly inside its parent div? The width should be contained within the padding area. The top and left placement is correct, but the right side needs adjustment. Check out this link for refe ...

htmlcss

Storing canvas image on server using Jquery and PHP

I need assistance with storing a Canvas image to the server using PHP. The file is appearing but it shows 0 bytes. Could you please provide me with guidance on resolving this issue? Below is the code I am currently using: HTML: <img id="image" src="d ...

phpjqueryimagecanvas

Using jQuery or Javascript to enclose every character in a given string with an HTML tag

I am trying to create a function that can take a string of text and wrap each letter within that string with an HTML tag such as <i> or <span>. Although I have made some progress, the current solution is not working as expected. The issue I a ...

javascripthtmljquerycsssplit

Adjusting the decimal points of numbers within a table to create the illusion of a "centered" alignment within the cell

Looking for a table design featuring a column of decimal numbers, each with varying lengths before and after the decimal point, while keeping the decimal points aligned. The width of the column should be flexible, expanding to accommodate long numbers in ...

htmlcsshtml-tablealignmentdecimal

What are some ways to create a traditional HTML form submission and incorporate jQuery solely for the callbacks?

Given that my page consists solely of a simple "name and email" registration form, I see no reason why I shouldn't stick to the traditional approach: <form action="/Account/Register/" method="POST" id="registration-form"> <fields ...

javascriptjqueryhtmlajaxforms

Here is a guide on how to ensure that the div elements automatically fill the available space

Looking at this html page: Check out the jsFidlle Demo here I am aiming to have the boxes fill up the space effortlessly, each with equal width but varying heights. This is similar to the layout in Google Keep notes ...

jqueryhtmlcsstwitter-bootstrap

The color of the text changes from its default color when not in use

Hey there, let me break this down for you... I'm currently in the process of styling a contact form. I've managed to change the text color of my input focus to white. However, when I click away from the form, the inputted text color reverts ba ...

htmlcsscontact-form

What is the process for utilizing npm/yarn installations within a .Net Framework WebAPI project?

In my project, I utilize SCSS and would like to incorporate Bootstrap.scss in order to create a single class that inherits multiple Bootstrap classes. For instance: .myButtonClass { @col-xs-12; @col-sm-6 } This way, I can replace class="col-xs-12 col-sm- ...

css.netnpmasp.net-web-api2yarnpkg

A more efficient approach to creating a personalized design

After realizing the original question was unclear and wouldn't solve my problem, I have decided to edit it and create a new one. For my project, I require a customized layout where users can move, resize, add, or remove each box according to their pr ...

javascriptjquerycsslayoutmargin

Creating movement effects for a line on an HTML5 canvas following a previous animation

I am facing an issue where my straight line starts animating towards the circle right at the beginning of page load. I am struggling with finding the logic to make the line animate in the opposite direction after the first animation is completed (which is ...

javascriptjqueryhtmlanimationcanvas

Trouble with CSS animations in ThreeJS's CSS3DRenderer

Seeking a way to incorporate plain text (2D or 3D) into a threeJS scene while applying CSS effects, I stumbled upon this resource. It seemed to offer the solution I was looking for. However, when I tried to apply an animate.css class (a well-known CSS anim ...

cssthree.js

What is the more effective choice for Automation Testing: Static or Dynamic dropdown menu options?

Currently facing an issue with dropdown selections while conducting automated testing. Selenium's Select(); method has been reliable when running tests in multiple cycles and choosing different options each time. The challenge arises when the dropdow ...

htmlseleniumdropdown