0
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
<body>
    <div class="barFixed">
        <div id="block1">
            <p >some</p></br>
            <p >text</p></br>
        </div>
        <div id="block2">
            <p id='spanTxt'>T</br>E</br>X</br>T</br></p>
        </div>
    </div>
    <div class="slideTab">            
        <img src="19.jpg" style="max-width: 39%; max-height: 39%;"/>            
        <img src="20.jpg" style="max-width: 39%; max-height:39%;"/>            
    </div>
</body>

2 ответа 2

0

Лучше всего будет запихнать 2 картинки в div и прописать им свойстав в css)


background: url("http://www.auto-mehanika.ru/image/I00039229.jpg") center center no-repeat; - задаем задний фон картинкой и центрируем ее (по вертикали и горизонтали) с помощью center center, а так же задаем на всякий случай no-repeat, чтобы картинка не превратилась в "узор". На будущее, если хочешь ставить какую-либо картинку на задний план - используй то, background: ... + background-size: cover; (заполнить фон полностью), но в твоем случае нужен background-size: contain; (показать картинку полностью)

Ссылка на background-size: https://www.w3schools.com/csSref/css3_pr_background-size.asp


про флекс особо не могу сказать. Долго.

просто прочитай это - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ и для удобства центрирования объектов - http://howtocenterincss.com

html, body{
  width:100%;
  height: 100%;
}

.block{
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;

}

.block > div{
  width: 100%;
  height: 100%;
}

.img1{
  background: url("https://i1.quto.ru/p1024x768/53fc737ba1dae.jpeg") center center no-repeat;
  background-size: contain;
}

.img2{
  background: url("https://i1.quto.ru/p1024x768/53fc737ba1dae.jpeg") center center no-repeat;
  background-size: contain;
}
<div class="block" >
    <div class="img1"></div>
    <div class="img2"></div>
</div>

0

width:100%;

*
{
  margin: 0; 
  padding: 0;
}
.full
{
  width: 100%;
}
<img src="https://northbridgecos.com/wp-content/uploads/2016/01/sample4_l.jpg" class="full"/>

либо через background-image

*
{
  margin: 0;
  padding: 0;
}

.full
{
  width: 100%;
  height: 400px;
  background-image: url(https://northbridgecos.com/wp-content/uploads/2016/01/sample4_l.jpg);
  background-size:cover;
}
<div class="full" ></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.