CODEWITHSUNDEEP
htmlcss
Dmitriy Slepnev
Dmitriy Slepnev

Reputation: 1

container's border is not visible on the side where image is overflowed

html:
<div class="photo">
      <img src="...">

    </div>

css:
.photo {
        width: 300px;
        height: 400px;
        border: 1px solid black;
        overflow: visible;
        margin-top: 20px;
        margin-left: 20px;
      }

      img {
        height: 100%;
        width: auto;
        float: right;
      }

border is not visible on left side when float is "right" and border is not visible on right side when float is "left" https://jsfiddle.net/amc9s21v/2/

Upvotes: 0

Views: 44

Answers (3)

Zohaib Majeed
Zohaib Majeed

Reputation: 58

Simply use overflow: hidden;. Than code becomes: 

<!DOCTYPE html>
<html lang="ru"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .photo{
            width: 300px;
            height: 400px;
            border: 1px solid black;
            margin-top: 20px;
            margin-left: 20px;
            overflow: hidden;
        }

        img{
            height: 100%;
            width: auto;
            float: right;
          }
    </style>


  </head>
  <body >
    <div class="photo">
       <img src="https://images.freeimages.com/images/large-previews/68c/delicate-arch-2-1391623.jpg">

    </div>
  </body></html>

If you want to show overflowed area than try following code:

<!DOCTYPE html>
<html lang="ru"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .photo {
        width: auto;
        height: 400px;
        border: 1px solid black;
        display: inline-flex;
        margin-top: 20px;
        margin-left: 20px;
      }

      img {
        height: 100%;
        width: auto;
        float: right;
      }
    </style>


  </head>
  <body >
    <div class="photo">
        <img src="https://images.freeimages.com/images/large-previews/68c/delicate-arch-2-1391623.jpg">

    </div>
  </body></html>

DEMO

Upvotes: 0

Deepak A
Deepak A

Reputation: 1636

.photo {
  width: 300px;
  height: 400px;
  border: 1px solid black;
  overflow: auto;
  margin-top: 20px;
  margin-left: 20px;
}

img {
  height: 100%;
  width: auto;
  float: right;
}
<body>
  <div class="photo">
    <img src="https://images.freeimages.com/images/large-previews/68c/delicate-arch-2-1391623.jpg">

  </div>
</body>

</html>

overflow:auto does the job

Upvotes: 1

Punitha Subramani
Punitha Subramani

Reputation: 1477

Try to change visible to auto

overflow: auto;

Upvotes: 0

Related Questions