Can I achieve css rectangle shapes without width and height property

Question

I have a image icon inside a image container. The image container width and image position is varying in different pc and os. How to achieve this.

My image container below

liveContainer: {
    width: "45%",
    height: "20%",
    top: "45px",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    borderRadius: "4px",
    backgroundColor: theme.palette.background.white,
    position: "absolute",
  }

The image styles are as below

Live: {
    position: "absolute",
    top: "2px",
    backgroundColor: theme.palette.background.red,
    color: theme.palette.button.primary.contrast,
    border: "1px solid " + theme.palette.background.red,
    height: "12px",
    fontSize: "8px",
    fontWeight: "bold",
    padding: "0px 3px",
    borderRadius: "3px",
  }

react-jsx code

<div className={classes.liveContainer}>
      <span className={classes.Live}>LIVE</span>
</div>

.liveContainer {
    width: 45%;
    height: 20%;
    top: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    /*background-color: theme.palette.background.white;*/
    background-color: white;
    position: absolute;
  }
.Live {
    position: absolute;
    top: 2px;
    /*background-color: theme.palette.background.red;
    color: theme.palette.button.primary.contrast;
    border: 1px solid  + theme.palette.background.red;*/
    background-color: red;
    border: 1px solid red;
    height: 12px;
    font-size: 8px;
    font-weight: bold;
    padding: 0px 3px;
    border-radius: 3px;
  }

<div class="liveContainer">
   <span class="Live">LIVE</span>
</div>

need to achieve the container style without the width and height. Is that possible kindly help me.

position absolute into a position absolute container, oh man... — MaxiGui, Apr 22 '22 at 07:16

score 0 · Answer 1 · answered Apr 22 '22 at 07:30

I don't know how you are using position absolute on your Live but I removed it for the demo here as I cannot dynamicaly change it with css.

I remove your width and height on container and I set a padding:40px;

DEMO

.liveContainer {
    /*width: 45%;
    height: 20%;*/
    top: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    /*background-color: theme.palette.background.white;*/
    background-color: white;
    position: absolute;
    
    /* ADDED */
    padding:40px;
  }
.Live {
    /*position: absolute;
    top: 2px;*/
    /*background-color: theme.palette.background.red;
    color: theme.palette.button.primary.contrast;
    border: 1px solid  + theme.palette.background.red;*/
    background-color: red;
    border: 1px solid red;
    height: 12px;
    font-size: 8px;
    font-weight: bold;
    padding: 0px 3px;
    border-radius: 3px;
    
    /* ADDED */
    margin:5px;
  }
  
  
  
/*ADDED*/
body{
  background: lightgrey;
}

<div class="liveContainer">
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
   <span class="Live">LIVE</span>
</div>

Hi maxi, I tried your code but, I need each live button with white background and place the over the image as in sample design I've attached. — Divya Mohan, Apr 24 '22 at 05:52

Can I achieve css rectangle shapes without width and height property

1 Answers1

DEMO