Блог

Как задать высоту и ширину изображения в html?

Но, на мой взгляд, изображение выглядит так

Вот html-код:

HTML

 <div class="imgslides">
        <div class="slide">
            <img src="uploads/pexels-pixabay-415100.jpg"  />
        </div>
        <div class="slide">
            <img src="uploads/eric-ward-ISg37AI2A-s-unsplash.jpg"  />
        </div>
        <div class="slide">
            <img src="uploads/pexels-helena-lopes-745045.jpg"  />
        </div>
        <div class="slide">
            <img src="uploads/pexels-pixabay-38284.jpg"  />
        </div>
        <div class="slide">
            <img src="uploads/pexels-visionpic-net-341378.jpg"  />
        </div>
    </div>
  

Ниже приведен CSS для html:

CSS

 .sliders
        {
            width:700px;
            height: 400px;
            overflow: hidden;
        }
        .show
        {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .imgslides
        {
            width: 500%;
            height: 100%;
            display: flex;
        }
  

Есть предложения?

Вам нужно установить высоту и ширину для изображения, если вы загружаете его в размере, который больше, чем вы хотите показать. Будьте осторожны, у вас есть класс slide в html, а в css написано sliders . Вы могли бы установить размер во внешнем div и иметь класс изображения:

  .imgclass
    {
        width: 100%;
        height: 100%;
    }
  

Просто помните, что лучше всего использовать изображения меньшего размера для небольших экранов