width, min-width, max-width re Practice (height empathy)

<img src="1.jpg" style="width:480px!important;”>

60 questions: Known as code, how to be modified to make the picture width 300px? Note that the original code can not be modified.

img {
    max-width: 300px;
}

Reference links: wood-Yang advanced front-end

Change this: how to make modifications to the image width 700px?

img {
    min-width: 700px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>width & max-width</title>
    <style>
        .wrapper {
            width: 500px;
            margin: 50px auto;
        }
        img {
            /* max-width: 300px; */
            min-width: 700px;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <img src="1.jpg" style="width:480px!important;">    
    </div>
</body>
</html>

Written on the back:

Some time before doing the project began to pay attention to this property, slightly in front of a recording essay, the flex layout, defining the content (such as content exceeds displayed with an ellipsis) implementations in the container , this time We see this problem in a title, so you wrote a separate demo recording taste.
Scene It can be applied, for example: some pages usually have a footer, demand is relatively large when the screen height to accommodate the page content or surplus, this time, the page height is set to height 100vh screen one screen, when the screen height is relatively small, not enough time on the basis of the page on the package is not deformed page, the page height is set to a fixed value such as 800px. At this time, as follows:

页面 {
    min-height: 100vh;
    height: 800px;
}

When 100vh > 800pxthe page height value min-height, and when 100vh < 800px, the page height is 800px, happens to meet the demand.

width, min-width, max-width re Practice (height empathy)

Guess you like