How to adjust image inside the border?

Asked

Viewed 291 times

2

How to adjust this image inside the border, in HTML 5.

HTML

<figure class="foto-legenda">
  <img src="_imagens/coz21web.jpg" width="830">

  <figcaption>
    <h3>Marcenaria Anderlopes</h3>
    <p>Realizando sonhos</p>
  </figcaption>
</figure>

CSS

figure.foto-legenda {

    position: relative;
    border: 8px solid white;
    box-shadow: 1px 1px 4px black;}

figure.foto-legenda figcaption {

    opacity: 0;
    position: absolute;
    top: 0px;
    background-color: rgba(0, 0, 0, .3);
    color: white;
    padding: 10px;
    box-sizing: border-box;
    transition: opacity 1s;
    height: 100%;
    width: 100%; }

figure.foto-legenda:hover figcaption {opacity: 1;}

inserir a descrição da imagem aqui

html css

  • Welcome to Sopt. Please post the code with your attempt, we can help from there. Remembering that it is always good to read [Ask] and if possible make a [tour] to understand how the community works ;)

  • Put your HTML code so you can better understand your question. You can use a service like Pastebin

1 answer

0


Eduardo my suggestion is to make a unique CSS for the image. in case I made this class figure.foto-legenda img and put in it the 100% width and the automatic height.

See that now it occupies the whole area. (have tb display in "Whole Page" to see that it adapts the width of the screen) OBS: besides the image css I did not touch anything else, neither in css nor in html, only the same image css.

figure.foto-legenda {
    position: relative;
    border: 8px solid white;
    box-shadow: 1px 1px 4px black;
}

figure.foto-legenda img {
    width: 100%;
    height: auto;
    display: block;
}

figure.foto-legenda figcaption {
    opacity: 0;
    position: absolute;
    top: 0px;
    background-color: rgba(0, 0, 0, .3);
    color: white;
    padding: 10px;
    box-sizing: border-box;
    transition: opacity 1s;
    height: 100%;
    width: 100%; 
}

figure.foto-legenda:hover figcaption {
    opacity: 1;
}
<figure class="foto-legenda">
  <img src="http://unsplash.it/600/200">

  <figcaption>
    <h3>Marcenaria Anderlopes</h3>
    <p>Realizando sonhos</p>
  </figcaption>
</figure>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.