What is the best way to adjust image size according to the dimensions of the parent container using CSS

I am working on a card game using Bootstrap styling and I have a container with a background image of a card table (1000x1000). As I resize the browser window, the card table image shrinks to 800x800, then to 500x500, and finally to 200x200. My issue is that the child images within the container (100x70) do not scale proportionally with their parent container.

Is there a way to ensure that the child images also reduce in size in the same ratio as their parent container?

.game-box {
  height: 1000px;
  position: absolute;
  left: 0;
  background: url('../table/tbltop.jpg') no-repeat;
  -webkit-background-size: 100% auto;
}
<div class="container game-box">
  <img id="p1" class="war card">
</div>

htmlcssbootstrap-4

Answer №1

#pictureFrame{
    background-image: url("add your image link here");
    background-size:100% 100%;
    background-repeat: no-repeat;
}

Remember, the image may not be proportional but will fit the width and height of the frame.

This should give you a good starting point....

Answer №2

If you're looking to adjust the width only.

.wrapper{
    height: 100vh;
    background-image: url("https://www.example.com/image.jpg");
    background-size:100% 100%;
    background-repeat: no-repeat;
}
<div class="wrapper game-box">
   <img id="p1" class="war card">
</div>

If you want to adjust both height and width.

.wrapper{
    height: 100vh;
    background: url('https://www.example.com/image.jpg') no-repeat;
    background-size: 100% auto;
}
<div class="wrapper game-box">
   <img id="p1" class="war card">
 </div>

Answer №3

This code snippet showcases the utilization of flex-box to organize the cards. It's worth exploring different variations of justify-content to achieve your desired layout. The width and height of the main container have been hardcoded for demonstration purposes, but it's advisable not to do so in a live environment. Feel free to experiment with resizing effects by adjusting those values. Each card container is set to occupy 10% of the total width and height, but this percentage can be modified to suit your preferences.

Sample HTML Structure:

<body>
    <div class="container game-box">
      <div class="card-wrapper">
          <img id="p1" class="war card" src="https://dummyimage.com/70x100/000/fff">
      </div>
      <div class="card-wrapper">
          <img id="p1" class="war card" src="https://dummyimage.com/70x100/000/fff">
      </div>
    </div>
</body>

CSS Styles Applied:

.game-box{
    height: 1000px;
    width: 1000px;
    position: absolute;
    left: 0;
    background: url("https://dummyimage.com/1000x1000/f00/aaa") no-repeat;
    -webkit-background-size: 100% auto;
    display: flex;
    justify-content: space-around;
}

.card-wrapper {
    width: 10%;
    height: 10%;
}

.card {
    width: 100%;
}

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

Methods to disregard class prefix in css document

When I inspect elements in the Chrome console, I notice styles applied to certain divs/buttons like this: /* Sample Chrome browser styles */ .ItemClass1-0-3-171.ItemClass2-0-3-173: { background-color: "red" } I'm wondering how I can def ...

csssass

Hiding loading spinner in Ionic 2 upon iframe completion

I need to embed an external webpage in my app using an iframe. I have successfully implemented a loading animation while the iframe is loading, but I am unsure how to hide the animation once the iframe content has loaded. Unfortunately, I am unable to edit ...

htmlangulariframetypescriptionic-framework

Mobile device causing elements to resize unevenly

On my simple webpage, I have a combination of text and a table. Check out the HTML below: <body> <div id='stat'> <p class='subheading'>Stat of the Week: Average Final Standings</p> <p class='text&apo ...

androidhtmlcssresizehtml-table

highcharts-ng expands in flexbox without contracting

I've encountered an issue while trying to incorporate a highchart within a flexbox container. The chart expands along with the container without any problems, but it fails to contract when the container size decreases. My current setup involves angul ...

cssangularjshighchartsflexboxhighcharts-ng

Implementing a Jquery check based on a checkbox

Hey, I'm having an issue with a condition. When I uncheck the checkbox, it doesn't uncheck. I've tried to make a block display, but the JavaScript isn't working. I attempted to add: document.getElementById("Reload").style.display = "b ...

javascriptjqueryhtmlcssbootstrap-4

When the page loads in the React platform, a section of the footer unexpectedly overlaps with another component

After working on this section some time ago, I returned to find a strange behavior that I couldn't fix by changing the CSS or wrapping components in divs. If you want to see the issue, check out this screenshot: issueReact To view the code where the ...

cssreactjs

Reactjs Rendering problem with retrieving data from the backend in a popover

Take a look at the test environment where this problem is occurring https://codesandbox.io/s/nice-cache-kl12v My website design is being done with antd. Right now, I'm facing an issue where I need to display notifications to the user, which are acces ...

javascripthtmlcssreactjsantd

Locate the ancestors of a specific element inside a designated container

Reviewing my code, it contains... <div class="container"> <div id="tropical"> <div class="info"> <div class="desc"> <p>Lorem ipsum.......</p> ...

javascriptjqueryhtmlcss

Adding dynamic text to a <span> tag within a <p> element is causing a disruption in my layout

I'm encountering an issue with a Dialog box that displays a message to the user regarding file deletion. Here's how it looks: +-----------------------------------------------------------------------+ | Delete File? ...

javascripthtmlcss

What is causing the navigation bar object to not adhere to the CSS rules?

My presentation for the MVP is outlined below: .navbar { flex-direction: row; } <!DOCTYPE html> <html lang="en" dir="ltr> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="h ...

htmlcssbootstrap-4

Triggers the request for Windows authentication when accessing a webpage on a website

Whenever I attempt to access a specific page on my website, a login screen pops up asking for my username and password. Even after entering the correct credentials and clicking OK or Cancel, the page still loads as normal. I can't figure out why this ...

asp.netiiswindows-authenticationhtml

Tips for increasing the number of inputs within a form using <script> elements

I am currently working on a form within the script tags and I would like to include additional input fields before submitting. However, the submit button seems to be malfunctioning and I suspect that there may be an issue with how I am accessing it in my c ...

javascriptjqueryhtmlforms

Can a CSS rule be prevented from inheriting?

Currently, I have implemented this CSS rule in the body selector: body { text-align:center } However, it seems like this rule is inheriting down to all other text elements on the page. Is there a way to prevent CSS from applying this rule to other elem ...

css

The issue of Ajax failing to execute an HTTP POST request in an HTML environment

I am creating a sample HTML code that involves making HTTP post requests using an Ajax function. The task at hand is to execute 2 HTTP POST requests and 1 GET request sequentially based on the correct response received. POST: URL: http://localhost:8082 ...

htmljsonajax

Combining Isotope, infiniteScroll, Wordpress, and Bootstrap is a powerful formula

Attempting to accomplish a rather straightforward task... The scenario involves a custom-post-type archive page in Wordpress where I display ten posts per page with pagination. I utilize isotope js for div packing and employ next_posts_link() to create a ...

jquerywordpressbootstrap-4infinite-scrolljquery-isotope

Is it possible for me to create a menu using the .row and .col classes from Bootstrap?

I attempted to create a menu using Bootstrap's cols. Something similar to this: https://i.stack.imgur.com/55xst.png However, I faced numerous challenges when trying to implement it into Wordpress and realized that it may not be the best approach... ...

htmlcssmenutwitter-bootstrap-3

Guide on Setting up Bootstrap Using NPM in Laravel Installation

After successfully adding Bootstrap to my package.json file using "bootstrap": "^4.3.1" and running npm install without errors, I'm now wondering how to actually integrate Bootstrap into my view. It appears that NPM has installed Bootstrap in the /nod ...

laravelnpmwebpackbootstrap-4laravel-mix

The jQuery mouseout event is activated whenever my tooltip is hovered over

Recently, I encountered an issue with a menu that adds a https://i.sstatic.net/A0J2U.png Within the menu, there is jQuery code that functions to add a class on hover and remove it on mouse-out. The code snippet looks something like this... $(document).r ...

javascriptjquerycsstooltip

Do HTML buttons without values get sent in a form submission?

When you have a button with the following code: <button class="button yellow" type="submit" name="button">Log in</button> and you submit it, what exactly gets sent to the server for this specific button that has a name attribute but no value ...

html

Creating a drop-down menu that aligns perfectly under the bar in Material-UI: What you need to know

While working with Material-UI, I encountered a problem with my drop-down menu. Every time I click on it, it covers the bar instead of appearing below it (see image links below). https://i.stack.imgur.com/1Y8CL.jpg https://i.stack.imgur.com/emf87.jpg Is ...

javascriptcssreactjsmaterial-ui