Блог

Главная - Вопросы по программированию - граница контейнера не видна с той стороны, где изображение переполнено

граница контейнера не видна с той стороны, где изображение переполнено

#html #css

#HTML #css

Вопрос:

 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;
      }

граница не видна с левой стороны, когда значение float равно «right», и граница не видна с правой стороны, когда значение float равно «left»
https://jsfiddle.net/amc9s21v/2 /

Комментарии:

1. Я хочу видеть обтекаемую часть изображения и границу контейнера над изображением одновременно

Ответ №1:

 .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>

переполнение: автоматическое выполнение задания

Ответ №2:

Попробуйте изменить видимость на авто

 overflow: auto;

Комментарии:

1. ваше решение отличное. лучше объяснить с помощью снипета, чтобы другие тоже могли научиться

2. переполненная часть скрывается в этом случае, я хочу видеть заполненную часть и границу контейнера одновременно

Ответ №3:

Просто используйте overflow: hidden; . Чем код становится: 

 <!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>

Если вы хотите показать переполненную область, попробуйте следующий код:

 <!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>

ДЕМОНСТРАЦИЯ

Комментарии:

1. Я хочу видеть обтекаемую часть и границу контейнера над изображением одновременно