<!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 картинки в 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>
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>