Home>

I want to display menu-image at 100% in the frame of menu-card.

Error message The code below
does not respond well. At the bottom of the source code listed.
.menu-image {
  width: 100%;
}
Applicable source code
[HTML]
      
        
           Menu 
          
            
              
                
                 Blend coffee 
                <p>This is the most popular product.<br>Please enjoy not only the taste but also the aroma</p>
              
            

[CSS]
@charset "utf-8";
.menu {
  padding: 90px 0 60px;
  color: # 5a5c5f
}
.menu-card {
  width: 33%;
  margin-top: 35px;
}
.menu-card-inner {
  padding: 25px 30px;
  background-color: # dbe0e4;
  border-radius: 7px;
  box-shadow: 1px 1px 4px # d2d4d6;
  text-align: center;
}
.menu-image {
  width: 100%;
}
I tried other than

width, but it doesn't respond.
Previous
.menu-card-inner {
Seems to be reflected.

Supplemental information (FW/tool version etc.)

Please provide more detailed information here.

  • Answer # 1

    % determines the width based on the parent element, so
    If you do not specify the width of the parent tag div that contains the img tag, there is no standard

    "Eh, there is no standard, but where is 100%? I don't know."