Question

我想将文本放在图像底部。当我缩小浏览器尺寸时，我希望文本始终保留在同一位置。

当前，图像正在按预期的方式改变大小和位置，但是文本没有改变并且停留在正确的位置。

我如何拥有它，以便文本能够快速响应并保持原样？因此，无论浏览器大小如何，如何使我的网站喜欢下面的图像？我在下面用文章h3尝试过，但是没有用。

IMG：

/*flexbox*/

div {
    width: 80%;
    margin: 1em auto;
    padding: 1em;
    box-sizing: border-box;

    display: flex;
    flex-flow: wrap;
}

div > * {
    flex: 1 1 30%;
    justify-content: flex-end;
    padding: 1em;
    border: solid .125em #00aaff;
}

div h1 {
    flex: 1 1 68%;
    font-size: 2.05em;
    text-align: center;
    padding: .5em;
    padding-bottom: .5em;
}

/*IMAGES*/
img{
    width: 100%;
    height: auto;
}

/*PAINTING SUMMARY*/
p{
    padding:2em;
}

/*SUN NAME OVER IMAGE*/
article h3{
    position: absolute;
    left: 20%;
    top:72%;
    width: 20%;
    height: auto;
    font-size: .75em;
    font-family: Arial, Helvetica, sans-serif;
    border: solid 1px darkgray;
    line-height: 1.2;
    text-align: center;
    z-index: 2;
    background: white;
    color: black;
    opacity: 0.8;
}

/*TABLET*/
@media screen and (max-width: 870px)
{
    .div {
        width: 80%;
        background: red;
        flex-flow: column wrap;
        justify-items: center;
        align-items: center;
    }
    
    article h3{
        position: absolute;
        left: 20%;
        top:72%;
        width: 20%;
        height: auto;
        font-size: .75em;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        z-index: 2;
    }
}

@media screen and (max-width: 602px)
{  
    div {
        width: 80%;
        background: teal;
        color: white;
        flex-flow: column nowrap;
        justify-items: center;
        align-items: center;
    }
    
    article h3{
        position: absolute;
        left: 20%;
        top:72%;
        width: 20%;
        height: auto;
        font-size: .75em;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        z-index: 2;
    }
    
    div h1 {
        width:90%;
    }

    }
    
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Practice</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="practice/lab6.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
    
<body>
    
    <div>
        <h1>Museum of the Arts</h1>
        <section>
            <img src="images/sunday.jpg"/>
        </section>
         
        <section>
            <p><span>Sunday Afternoon on the Island of La Grande Jatte</span>, painted in 1884, is one of Georges Seurat's most famous works. It is a leading example of pointillist technique, executed on a large canvas. Seurat's composition includes a number of Parisians at a park on the banks of the River Seine.
         </section>
        
        <article>
            <h3><cite>Sunday Afternoon on the Island of La Grande Jatte</cite></h3>
        </article>
        
        <main>
            <h3><cite>Nighthawks</cite></h3>
        </main>
        
         <section>
             <p><span>Nighthawks</span> is a 1942 oil on canvas painting by Edward Hopper that portrays people in a downtown diner late at night. It has been described as Hopper's best known work and one of the most recognizable paintings in American art Within months of its completion, it was sold to the Art Institute of Chicago on May 13, 1942 for $3,000.</p>
         </section>
         
        <section>
            <img src="images/nighthawk.jpg"/>
        </section>
        
        
    </div>
    
</body>
</html>

Answer 1

您可以通过使用2个CSS属性来实现：

将图像设置为DIV的背景，例如：https://www.w3schools.com/cssref/pr_background-image.asp
将文本位置属性定义为相对于div，例如：https://www.w3schools.com/cssref/pr_class_position.asp

希望获得帮助！

HTML CSS响应式浏览器大小的变化位置

1 个答案: