How to adjust the image inside the border?

Navigation
2

How do I 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;}

    
asked by anonymous 27.04.2018 / 03:49

1 answer

0

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

See that it now occupies the whole area. (display tb in "All Page" to see that it adapts the width of the screen) NOTE: in addition to the image css I did not move in anything else, neither in css nor in html, only css image itself. 

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>
    
27.04.2018 / 13:40
React- createRef () Api - this.child.current is null Laravel multitenancy with a BD only for users