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

Update the numerical data within a td element using jQuery

Is there a way to use jquery to increase numerical values in a <td> element? I've attempted the following method without success. My goal is to update the value of the td cell by clicking a button with the ID "#increaseNum". Here is the HTML st ...

javascriptjqueryhtmlhtml-table

Unable to implement CSS styling on Bootstrap collapsible menu

When you visit this website and resize the browser window to reveal the toggle buttons, clicking on either one will only expand the dropdowns to a small portion of the screen width. I would like both dropdowns to stretch out and fill 100% of the available ...

jqueryhtmlcsstwitter-bootstrap-3

Easily move a group of HTML elements at the same time with a simple

Exploring HTML5 Drag and Drop with Multiple Elements When it comes to dragging and dropping multiple elements in HTML5, there seems to be a limitation with the default draggable attribute. This attribute allows only one element to be dragged at a time, ma ...

javascripthtml

Enhance user interactivity on your website by incorporating jQuery and CSS for

<table id="tab"> <tr aaa="one" bbb="ooo"><td>xxx</td><</tr> <tr aaa="two" bbb="one"><td>xxx</td><</tr> <tr aaa="three" bbb="one"><td>xxx</td><</tr> ...

javascriptjqueryhtmlcss

Using CSS transforms to place the vanishing point

I am attempting to utilize CSS transforms to create a flat 'floor' that extends infinitely towards the horizon. The vanishing point, where the floor disappears into the distance, should align halfway up the browser window. I have encountered an ...

csstransform

Where should AJAX-related content be placed within a hyperlink?

When needing a link to contain information for an AJAX call, where is the correct place to include the info? I have typically placed it in the rel attribute, but after reviewing the documentation for rel, it appears that this may not be the right location ...

javascriptjqueryhtmlajax

Is there a way to customize the hover style of Material UI Select or Menu MenuItem using the theme?

The theme I designed import { createMuiTheme } from 'material-ui/styles'; export const MyTheme = createMuiTheme({ palette: { primary: { light: '#757ce8', main: '#3f50 ...

cssreactjstypescriptmaterial-ui

Problem with Bootstrap 3 navbar on mobile devices - not tappable or responsive

After years of using Bootstrap, I've come across a new issue with my implementation of a Bootstrap 3 Nav. While testing on a desktop browser with device emulation, the nav collapses and functions properly. However, when tapping on the header on an ac ...

javascriptjqueryhtmlcsstwitter-bootstrap

Create a visually stunning CSS3 animation within a specified container, mimicking the style shown in the

I'm currently working on creating the animation depicted in the image below: https://i.stack.imgur.com/W69EQ.jpg My goal is to develop a video slider where, upon clicking a button, the video will seamlessly shift to the right within its parent conta ...

htmlcss

Switching the image by clicking on the link

Looking for assistance with a code that displays three button images and fades in the relevant div when clicked using jQuery... http://jsfiddle.net/ttj9J/11/ HTML <a class="link" href="#" data-rel="content1"><img src="http://i.imgur.com/u1SbuRE ...

jqueryhtmlcss

PHP code for generating acrylic-style effect on images

Is there a way to create an acrylic or canvas effect on an uploaded image using an image library, script, or PHP command line? You can see exactly what I am looking for by following these steps: Open the link above. Upload a photo. Select acrylic prin ...

phpimageeffect

Chosen link fails to update color

I've successfully implemented a navigation bar that changes the content in the body when each link is selected. Utilizing AJAX for dynamic content changing, I can change the color of menu items on hover but am facing issues with changing the color upo ...

htmlcss

Unable to add the div using a jQuery click event

Hey there, I'm looking to add a div dynamically when clicking on another div. Check out the code snippet below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title></title> <script src= ...

javascriptjqueryhtml

compress a website to display advertisement

Here is a JSFiddle link I would like to share with you: I am currently working on squeezing the webpage to display an ad on the right side. http://jsfiddle.net/5o6ghf9d/1/ It works well on desktop browsers, but I am facing issues with iPad Safari/Chrome ...

javascripthtmlcss

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

I have a webpage built with AngularJS and Bootstrap. It's currently in beta and available online in (German and): teacher.scool.cool simply click on "test anmelden" navigate to the next page using the menu This webpage features a fixed transparent ...

javascriptcssangularjstwitter-bootstrap

Hover state remains persistent even after modal window is activated in outouchend

One of the buttons on my website has a hover effect that changes its opacity. This button is used to share information on Facebook. It's a simple feature to implement. Here is the CSS code: .social_vk, .social_fb { height: 38px; obj ...

javascriptjquerycss

Seeking a template for a server-side programmer who lacks proficiency in CSS and design?

Hey there all you wise folks! So here's the deal - I'm a PHP/JavaScript wizard when it comes to logic and server-side stuff, but I really suck at design, CSS, and all things arty. Does anyone have any recommendations for a template or tool that ...

phphtmltemplatescss

Leveraging the power of Required (html5) feature in Internet Explorer

What should I do if I want to make a textbox required on my webpage, but the issue is that it uses an HTML5 attribute? Is there a solution or alternative available? This is how I create my TextBox: @Html.TextBoxFor(model => model.SubChoiceText, new { ...

asp.net-mvchtmlinternet-explorerhtml-helper

CSS font-face is not functioning as expected

I'm experiencing issues with importing a CSS font, and I'm puzzled as to why it's not working. The specific font in question is 'deadjim.ttf' and it is located within my main public_html directory. I have confirmed that the file p ...

htmlcssfontsfont-face

A white background emerges when I select md-dropdown

Lately, I've been experiencing an issue on my website where a white background pops up whenever I click on a dropdown (md-select) in my form. Initially, it only happened with forms inside a modal, but now it's affecting dropdowns across the entir ...

javascriptcssangularjshtmlangular-material