Изображение не полностью отзывчиво, несмотря на использование класса img-liquid

Question

Я использовал img-fluid класс внутри тега img, но мое изображение не полностью отзывчиво.Он реагирует на экран меньшего размера, но перестает отвечать после увеличения экрана до определенного размера.

Я прочитал Как сделать изображение адаптивным с помощью начальной загрузки, не занимая всю ширину экрана.деление? и Bootstrap: img-отзывчивый против img-Fluid , но не смог решить проблему.

Вот как я пытался

HTML :

    <!-- THE HEADER -->
    <div class="container-fluid header">
        AUST CSE
    </div>
    <!-- IMAGE JUST BELOW HEADER -->
    <div class="wrapper" style="background: blue">
        <img src="images2/banner.jpg" class="img-fluid">
    </div>

CSS :

    .wrapper {
        width: 100%;
    }

На небольших экранах страница выглядит следующим образом: однако,на большом экране изображение не занимает 100% пространства и выглядит следующим образом: Я хочу, чтобы изображение занимало 100% ширины и увеличивало его высоту, точно так же, как оно делает этокогда экран меньше.

Answer 1

img-fluid использует max-width: 100%;.Как только содержащий элемент будет иметь такой же размер или больше ширины изображения, он перестанет изменять размеры.

Два варианта:

1) Использовать изображение с разрешением, котороепо крайней мере самая широкая ширина вашего элемента контейнера.Если ширина элемента контейнера не имеет фиксированного верхнего края (т. Е. Всегда будет составлять 80% ширины области просмотра), выберите достаточно большое изображение, чтобы оно хорошо выглядело на большинстве дисплеев (статистика поиска в большинстве распространенных браузеров).резолюции).

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */
.demo {
  background-color: rebeccapurple;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="demo">
        <img class="img-fluid" src="https://via.placeholder.com/1000x1000">
      </div>
    </div>
    <div class="col-md-8">
      <p>
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
      </p>
  </div>
</div>

2) Переопределить .img-fluid, чтобы размер изображения не превышал собственное разрешение.Недостатком здесь является зернистость изображения.Чем меньше исходное разрешение, тем более зернистым оно станет при масштабировании на большие площади.Вы можете видеть в моем примере, что текст довольно размыт.

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */
.demo {
  background-color: rebeccapurple;
}

/* Will override all instances of .img-fluid. */
.img-fluid {
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="demo">
        <img class="img-fluid" src="https://via.placeholder.com/100x100">
      </div>
    </div>
    <div class="col-md-8">
      <p>
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
        Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. Lorem ipsum dolor. 
      </p>
    </div>
  </div>
</div>

Я также включил приведенный ниже пример области видимости, который позволяет переопределять только определенные изображения, чтобы они превышали их исходное разрешение.

@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css' );

/* For demo purposes and is not required. */
.demo {
  background-color: rebeccapurple;
}

/* Scoped so that we can target specific images. */
.img-fluid.img-full-width {
  width: 100%;
}

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="demo">
        <img class="img-fluid img-full-width" src="https://via.placeholder.com/100x100">
      </div>
    </div>
    <div class="col-md-8">
      <div class="demo">
        <img class="img-fluid" src="https://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

Answer 2

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

На основе выкл.вашей проблемы, похоже, ваши размеры недостаточно велики.Класс img-fluid изменит размер вашего изображения, но только до максимума его размеров.

Есть 1 из 2 вещей, которые вы можете сделать, чтобы исправить это.

1. ( Предпочтительный метод ) Выберите изображение с правильной шириной для экрана максимального размера, который вы хотите.(В большинстве случаев это будет 1920px)

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

Пример :

• Вот изображение с меньшими размерами (ваша проблема): JSFiddle

.container {
  border: 2px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h2>Image</h2>
  <p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
  <img class="img-fluid" src="https://cdn-static.denofgeek.com/sites/denofgeek/files/styles/main_wide/public/2015/11/main_0.jpg?itok=k1tyTR75" alt="HL2"> 
</div>

• Вот изображение с большими размерами (1920 пикселей): JSFiddle

.container {
  border: 2px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h2>Image</h2>
  <p>The .img-fluid class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
  <img class="img-fluid" src="https://s.aolcdn.com/hss/storage/midas/f8eff2a90708d58814bb4adc93634cbb/205752037/half-life-2-15622-1920x1080.jpg" alt="HL2"> 
</div>