Как увеличить размер фонового изображения?

Question

[Антон Романов]

Подскажите пжлст, как увеличить размер фонового изображения на 20%.
Надо, чтобы оно полностью отображалось. Если задаю фиксированные размеры или background-size: cover, то помещается только часть. Если правильно понимаю, то надо увеличить размер контейнера. Но как правильно это сделать? Изображение в правой части, в левой - текст. Надо в общем контейнере это делать или в отдельном?

Ссылка на проект здесь.

Код:

.main-container {
	margin-top: 100px;
	background-image: url("https://startly.web3templates.com/demo/software/images/screen2.jpg");
	background-size: contain;			/* Как увеличить изображение размер на 20%, чтобы оно отображалось целиком? */
	background-repeat: no-repeat;
	background-position: right center;
	box-sizing: border-box;
}

Answer 1

[alex_mirg]

https://codepen.io/alex-rogochiy/pen/gZXXdV
Используй вместо фона тег img так как это по сути не фон а отдельный элемент график
1. Изображению задаешь 100% ширину а высоту авто чтобы автоматически пропорционально высчитывалась
2. Ну а родителю ширину уже выбирай сам, в нашем случае это main_right
3. vertical-align: middle это как фикс используется, долго обяснять. Но если хочешь разобраться то поставь цветной фон main_right и увидишь что без vertical-align изображение по высоте пикселя на 4 меньше родителя

<div class="main_right right-block">
  <img src="https://startly.web3templates.com/demo/software/images/screen2.jpg" alt="">
</div>

.main-container {
  display: flex;
  justify-content: space-between;
	margin-top: 100px;
	box-sizing: border-box;
}

.main_left {
	width: 40%;
}

.main_right {
  width: 50%;
}
.main_right img {
  width: 100%;
  heiht: auto;
}

Comments

[alex_mirg]

еще я с помощью flex как видишь позиционирую main_left и main_right чтобы они расположились в ряд слева и справа

[Антон Романов]

Спасибо огромное! Теперь разобрался. С Наступающим!! )

А как сделать так, чтобы по высоте контент центрировался и тянулся при изменении разрешения экрана? Я просто хочу сделать эту часть (main-container) резиновой по высоте. height: 100% не работало. Сейчас задал для этого:

.header {
	position: relative;
	<b>height: 100vh; </b>

Блок стал тянуться, но контент (текст и изображение в .main_left и .main_right) по вертикали не центрируются. Как правильно сделать, чтобы по центру было? Задавать margin-top в пикселях не хочется, тк не очень адаптивно получается.

Также пробовал через

.main-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;

Но тоже не работало...

Как будет правильно сделать центрирование?

[alex_mirg]

Антон Романов,
Спасибо, тебя тоже с Новым Годом!
если я правильно понял то ты хочешь сделать так чтобы содержимое блока .main_left вертикально центрировалось относительно main_container. Грубо говоря, текст был по центру относительно картинки.
take.ms/CaTnd
в таком случае для main_left

.main_left { 
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Может быть изначально немного быть сдвинуто из-за отступов элементов которые находятся внутри этого блока но если их обнулить то содержимое будет по центру

[Антон Романов]

Спасибо!

Answer 2

[Даниил Кириллов]

Cделайте побольше .main-container

Comments

[Антон Романов]

вы имеете в виду, задать высоту в пикселях? Например так:

.main-container {
     height: 800px
}

А правильно будет задавать фиксированную высоту? с точки зрения мобильной адаптивности. Я только учусь, извиняюсь за нубские вопросы. Хочется сделать правильно с точки зрения логики.

[Даниил Кириллов]

Антон Романов, Вам проще тогда просто в фотошопе увеличить его

Answer 3

[Кирилл Жулин]

чтобы увеличить место удали это:
body {
width: 100%;
padding-left: 50px;
padding-right: 150px;
это я понял с твоего вопроса)))
а изображение лучше поместить в отдельный блок можно и див, в ксс можно задать размер и так далее

Comments

[Антон Романов]

Удалил, но изображение не стало больше. Только отступы пропали.

Я сделал также отдельный див под изображение: class="main_right right-block".
Но если прописываю фон туда, то изображение вообще не появляется (

.main_right {
  background-image: url("https://startly.web3templates.com/demo/software/images/screen2.jpg");
	background-size: contain;			
	background-repeat: no-repeat;
	background-position: right center;
}

Подскажи пжлст, как надо сделать правильно, чтобы изображение стало больше.