Question

经过几个小时的挫折，我决定只问你们;我用JQuery制作了一个照片，在这种情况下显示为图像..通常它是一个div。我希望div可以缩放并垂直和水平居中。现在既然图像有宽度和高度（如同所有图像一样），我不能使它与div相同，因为它有不同的测量值。我不希望图像在宽度和高度上都比div大，但我确实希望图像按照显示的div进行缩放。

请提前帮助并表示感谢，

HTML

<!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>name</title>

            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="css/reset.css">

        </head>
        <body>
                <header>
                    <mark><h1>NAME</h1></mark>
                    <h2>WEBSITE</h2>
                </header>

                <section id="upperContainer"><article id="leftBlock"></article><article id="rightBlock"><div id="photoPluginHolder"><img id="photoHolder" src="images/huis1.png"></div></div></article>
                </section>


                <section id="lowerContainer"><article id="leftBlock2"></article><article id="rightBlock2"></article></section>

                <section id="about"></section>
                <footer></footer>
        </body>
    </html>

CSS

    body
    {
        background-color: black;
        max-width: 100%;
        height: 100%;
    }

    @font-face 
    {
        font-family: fontje;
        src: url(../fonts/tunga.ttf);
    }

    header
    {
        width: 100%;
        height: 15vh;
        max-height: 8vw;
        /*background-image: url(../images/profile.png);*/
        background-color: white;
    }

    h1
    {
        font-family: fontje;
        font-size: 5vw;
        max-height: 5vw;
        line-height: 1;
        color: #333333;
    }

    h2
    {
        font-family: fontje;
        font-size: 2vw;
        max-height: 2vw;
        line-height: 0.1;
        color: #333333;
    }

    #upperContainer
    {
        width: 100%;
        max-width: 100%;
        height: 60vh;
        background-color: brown;
        text-align: center;
    }

    #leftBlock
    {
        width: 50%;
        height: 60vh;
        max-height: 60vh;
        background-color: orange;
        display: inline-block;
        vertical-align: middle;
    }

    #rightBlock
    {
        width: 50%;
        height: 60vh;
        max-height: 60vh;
        background-color: blue;
        display: inline-block;
        vertical-align: middle;
    }

    #lowerContainer
    {
        width: 100%;
        max-width: 100vw;
        max-height: 60vh;
        background-color: brown;
        text-align: center;
    }

    #leftBlock2
    {
        width: 50%;
        height: 60vh;
        max-height: 60vh;
        background-color: purple;
        display: inline-block;
        vertical-align: middle;
    }

    #rightBlock2
    {
        width: 50%;
        height: 60vh;
        max-height: 60vh;
        background-color: green;
        display: inline-block;
        vertical-align: middle;
    }

    #about
    {
        width: 100%;
        height: 90vh;
        background-color: pink;
    }

    footer
    {
        width: 100%;
        height: 15vh;
        background-color: white;
    }

    /*photogeval*/
    #photoPluginHolder
    {

    }

    #photoHolder
    {


    }

    #photoHolder > img
    {

        width: 92%;
        max-width: 100%;
        max-height: 100%;
        display: table;
    }


    #arrowLeftHolder
    {

    }

    #arrowLeft
    {



    }

    #arrowRightHolder
    {


    }

    #arrowRight
    {

    }

    #arrowLeft:hover
    {
        cursor: pointer;
    }

    #arrowRight:hover
    {
        cursor: pointer;
    }

    #arrowLeftHolder:hover
    {
        background-color: rgba(0, 0, 0, 0.225);
        cursor: pointer;
    }

    #arrowRightHolder:hover
    {
        background-color: rgba(0, 0, 0, 0.225);
        cursor: pointer;
    }

Answer 1

替换

getline

使用：

#photoPluginHolder
{

}

#photoHolder
{


}

#photoHolder > img
{

    width: 92%;
    max-width: 100%;
    max-height: 100%;
    display: table;
}

Answer 2

您好:) Haven尚未尝试过您的续订解决方案，但......这似乎也有效：

#elementId
{
position: relative;
max-width: 100%;
height: 60vh; 
z-index: 3;
background-image: url(../images/ellax4.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: center center;
}

中心和响应图像滑动清洁解决方案请

2 个答案: