Как я могу получить изображение внутри элемента, чтобы настроить размер элемента div, в котором он содержится, не устанавливая его в качестве фонового изображения? - PullRequest
Новая
       47

Как я могу получить изображение внутри элемента, чтобы настроить размер элемента div, в котором он содержится, не устанавливая его в качестве фонового изображения?

0 голосов
/ 05 октября 2019

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

Представьте себе сайт, который может быть разделен на три трети, и будет прокручиваться только средняя треть. Когда вы открываете сайт, внутри средней трети появляется изображение. Когда вы изменяете размер окна, изображение корректно адаптируется, но как только вы уладите, вы сможете начать прокручивать среднюю часть сайта, открывая текст и другие изображения под ним.

Для всех, кто интересуется просмотром кода, над которым я работаю, я предоставлю ссылку на кодовую ссылку. Цель состоит в том, чтобы у класса позвоночника и книги были высоты, зафиксированные на высоте экрана. Позвоночник не будет прокручиваться, но класс книги будет. Я просто хочу, чтобы изображение, которое появляется в верхней части класса книги, выглядело так же высоко, как и экран, так что это все, что вы видите, прежде чем начать его прокручивать.

https://codepen.io/brxtn/project/editor/XWRPzL

<div class="book">
    <div class="cover1">
      <img src="https://d2w9rnfcy7mm78.cloudfront.net/1004368/large_545c7a06dbaea4e0c1ccb78445041d39.jpg?1493861704?bc=1">

    </div>

.book{
    background: #000000;
    margin: 0px;
    padding: 0px;
    width: 730px;
    height: 100%;
    border: 1px solid black;
     border-left:none;
    background-color: white;
    }

img {
  width:100%;
  height:100%;
  overflow:hidden;
}

1 Ответ

0 голосов
/ 05 октября 2019

Если вы ищете способ явной установки ваших изображений в html и используете свойство, такое как background, без привязки изображения к явному классу, вы можете сделать следующее 

.container {
  height: 450px;
  border: 5px solid black;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contain-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="test.css">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <img src="https://d2w9rnfcy7mm78.cloudfront.net/1004368/large_545c7a06dbaea4e0c1ccb78445041d39.jpg?1493861704?bc=1" alt="" class="cover-image">
  </div>
  <div class="container">
    <img src="https://d2w9rnfcy7mm78.cloudfront.net/1004368/large_545c7a06dbaea4e0c1ccb78445041d39.jpg?1493861704?bc=1" alt="" class="contain-image">
  </div>
</body>
</html>

С помощью этой стратегии вы можете иметь либо свойство cover, либо contain того, что вы обычно имеете при использовании фона, это также позволяет вам сохранитьВаши изображения отзывчивы и сохраняют соотношение сторон.

Надеюсь, это поможет как-то:)

...