the width and height can be displayed proportionally with the percentage of padding-top. The current demand is that the height is fixed. How to display the width proportionally?
the width and height can be displayed proportionally with the percentage of padding-top. The current demand is that the height is fixed. How to display the width proportionally?
doesn't quite understand what effect you want, just set the percentage relative to the parent element directly by displaying the width proportionally, or use the flex layout. The height proportional display you mentioned earlier using padding-top should take advantage of the percentage setting of padding, which is set relative to the width of the parent element, if so, You can solve your problem directly by using the percentage of width
has found a solution: see here =" https://www.cnblogs.com/beile.
there is a way you can try
for example, if you want to implement a container with an aspect ratio of 1:3 , you can make a 1'3 pixel picture (the smaller the better), and then set the height to the fixed height you want, then the width will be adaptive, and you can set the outside container to float or inline-block
this feeling is to set max-height max-width so that it will be adaptive in all cases.
if you say the height is fixed, then you can write a dead height, without setting the width. In this case, the width will be exceeded or not enough. If you just look at the center. Consider left:50%;transtion: tranlstae (- 50%) to pull back.
does the use of font-family in the pc page css cause font infringement ...
figure 1 shows the effect of modifying the scroll bar style code in figure 2 , but you can see that there is still a color area on the left that is the default width of the scroll bar excuse me, how to cancel this part ...
as shown in the following picture, it s not round at all. Please help me to see if there is something wrong with my code html <div class="box">< div> css .box{ position: relative; width: 300px; height: 140px; ...
-sharpcointossing .left-container{ width: 100%; } -sharpcointossing .right-container{ width: 100%; } I would like to ask whether this form of css can be combined to write ....
The page is 100vh, the top half is a picture, 100vw, the height is variable, in order to maximize the display of the picture. Then the rest of the area displays the text, and I want to set the overflow-y: auto; overflow to slide to see the text. But ther...
.a{ width: 23%; height: 255px; margin: 15px 9px; display: inline-block; border-radius: 5px; border: 1px -sharpccc solid; cursor: pointer; } .b{ width: 1140px; } <div class="b"> <div class="a"> ... ...
Table: < table > < thead > < tr > < th > a < th > < th > b < th > < th > c < th > < th > d < th > < th > e < th > < tr > < thead > < tbody class= "getTableData " > < tr > < th > 1 < th > < th > 22222222222222222222222222222222222 < t...
display: inline-block; color: -sharp979797; background: -sharpfff; border-radius: 5px; border: 1px -sharp979797 solid; font-weight: 500; padding: 3px 10px; font-size: 12px; margin-bottom: 7px; this is what WINDOWS loo...
I read this article ( https: www.jianshu.com p fa0.) introduction originally: background: url(xxx); background-size: 10px 10px; the abbreviation is background: url(xxx) 10px 10px; but it doesn t work! I am chrome 70.0.3538.77 ...