How to make a form centered on a figure

Question

How to make a form centered on a figure

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have figure and inside it a form , the big problem is that when I resize the browser, the figure resets perfectly, however the form that is inside goes out of the object. >

The image below shows your normal view, with the browser maximized.

OBS: The figure displays the photo and form is the black rectangle

Whenyouresetthebrowser,formexitsfromthefigurecenteredspace,asshownbelow.

Ineedformtoalwaysbecenteredinthemiddleoffigure.

HTML

<figureclass="cx-fotos-portugal">
    <form>

    </form>
    <img src="./fotos-portugal/foto-portugal-capitania-do-porto-cascais.jpg">
</figure>

CSS

figure.cx-fotos-portugal img{
    width: 100%;
    height: 100%;
    max-height: 550px;
}

figure.cx-fotos-portugal form{
    position: absolute;
    width: 35.71428571428571%;
    height: 14.28571428571429%;
    max-height: 550px;
    background-color: #000;
    left: 35%;
    top: 30%;
}

css

asked by anonymous 31.07.2017 / 14:43

3 answers

Print div with appendChild Network connections between processes inside a machine

score 0 · Answer 1

That's why you're using top with%, to get this effect accurately use a fixed size in pixels and helping with media query for other resolutions.

Or you can also opt for a background: cover, like this:

* { margin: 0; padding: 0; }
figure {
    width: 100%;
    min-height: 550px;
    height: auto;
    position: relative;
    background-image: url(imagem);
    background-size: cover;
}

figure form{
    position: absolute;
    width: 35%;
    height: 14%;
    background-color: #000;
    left: 35%;
    top: 30%;
}

score 0 · Answer 2

0

Try adding these measures to your CSS:

figure.cx-fotos-portugal form {
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

31.07.2017 / 15:23

score 0 · Answer 3

Feel free to study Flexbox css tricks

figure.cx-fotos-portugal{
    margin: 0 auto;
    width: 95%;
    height: 50vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

figure.cx-fotos-portugal form{
    position: relative;
    z-index: 100;
    width: 30%;
    height: 20%;
    background-color: black;
    margin: 0;
    padding: 0;
}

figure.cx-fotos-portugal img{
    top: 0;
    position: absolute;
    width: 100%;
    height: 50vw;
}

<figure class="cx-fotos-portugal">
    <form>

    </form>
     <img src="https://blog.emania.com.br/content/uploads/2015/12/Papel-de-Parede-de-Paisagem.jpg">
</figure>