Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
slavek777
5 / 5 / 1
Регистрация: 15.09.2016
Сообщений: 337
Завершенные тесты: 1
1

Центрирование изображения внутри элемента

13.02.2020, 12:43. Просмотров 300. Ответов 11
Метки нет (Все метки)

Здравствуйте! Есть задача - не загружая семантическую составляющую вложенными конструкциями, сформировать правило в CSS для центрирования: надо изображение (header.jpg) размером в 8 fr расположить по центру (по горизонтали) grid-блока header, а пустые места справа и слева обычным бэкграундом залить. Я применял разные теги CSS ничего не удалось.


CSS
1
2
3
4
5
6
7
.header
  {
  height: 8em;
  padding: 2em 10%;
  background-image: url(img/Header.jpg);
  justify-content: center;
  }
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
  <div class="page">   
    <div class="header">Header</div>
    <div class="grid-container">
      <div class="aside">Left</div>
      <div class="main">Main</div>
      <div class="block">
        <div class="m">M</div>
        <div class="m">M</div>
        <div class="m">M</div>
        <div class="m">M</div>
        <div class="m">M</div>
        <div class="m">M</div>
      </div>
      <div class="aside">Right</div>
    </div>
    <div class="footer">Footer</div>
  </div>
</body>
HTML5
1
2
3
4
5
.grid-container {
  display: grid;
  height:100vh;
  grid-template-columns: 2fr 6fr 2fr 2fr;
}
0
Миниатюры
Центрирование изображения внутри элемента   Центрирование изображения внутри элемента  
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.02.2020, 12:43
Ответы с готовыми решениями:

Центрирование изображения внутри div
Необходимо отцентрировать изображение внутри блока. Ширина изображения устанавливается в размер...

Центрирование картинок внутри div
Не могу сделать так что бы все изображения стояли всегда по центру блока, помогите пожалуйста.

Центрирование картинки внутри дива
Здравствуйте, Подскажите как выровнять картинку внутри дива по центру и по вертикали?

Центрирование картинки внутри div
Всем привет. Засыпаю, могу чего-то недопонимать, но все же: Есть div, фиксированные размеры...

Центрирование изображения
Добрый день. Подскажите, пожалуйста, как реализовать данное расположение изображений, пробовал...

11
Panda58dev
Developer☭
48 / 27 / 3
Регистрация: 01.02.2019
Сообщений: 141
13.02.2020, 14:54 2
Цитата Сообщение от slavek777 Посмотреть сообщение
применял разные теги CSS ничего не удалось.
я бы это всё делал через flexbox, смотрю у Вас в первом css коде есть justify-content: center;, этот стиль будет работать только при display: flex;
то есть, если код у Вас будет вот такой:
CSS
1
2
3
4
5
6
7
8
.header
  {
  height: 8em;
  padding: 2em 10%;
  background-image: url(img/Header.jpg);
  display: flex;
  justify-content: center;
  }
то блок с классом grid-container встанет по середине в блок header.
0
AlexZaw
1006 / 874 / 384
Регистрация: 07.08.2016
Сообщений: 2,587
Завершенные тесты: 2
13.02.2020, 17:09 3
Цитата Сообщение от Кирилл848 Посмотреть сообщение
есть justify-content: center;, этот стиль будет работать только при display: flex;
Так то у grid тоже есть это свойство.
https://developer.mozilla.org/ru/doc...SS_Grid_Layout
0
slavek777
5 / 5 / 1
Регистрация: 15.09.2016
Сообщений: 337
Завершенные тесты: 1
13.02.2020, 20:10  [ТС] 4
И почему тогда это свойство не работает?
0
D_Vik
162 / 88 / 29
Регистрация: 19.07.2016
Сообщений: 407
Записей в блоге: 1
14.02.2020, 01:08 5
Потому что у вас header за пределами грид контейнера.
0
Андрей100
-115 / 8 / 5
Регистрация: 15.11.2018
Сообщений: 73
14.02.2020, 04:14 6
скачать готовое в архиве извлечь из архива
заметил grid-коды не работают в браузере Internet Explorer11 но работают в браузере SlimBrowser

центрирования задаётся margin auto в css
заливка background 000000 -всего фона
заливка background 808080 -под блоками
0
Вложения
Тип файла: zip 888.zip (419.0 Кб, 7 просмотров)
slavek777
5 / 5 / 1
Регистрация: 15.09.2016
Сообщений: 337
Завершенные тесты: 1
14.02.2020, 07:27  [ТС] 7
А как можно решить данную оплошность не прибегая к инкапсуляции хэдера в грид?
0
D_Vik
162 / 88 / 29
Регистрация: 19.07.2016
Сообщений: 407
Записей в блоге: 1
14.02.2020, 08:16 8
У вас картинка слишком мала для хедера, да и потом, вам сначала нужно определится, какая максимальная ширина будет у вашей страницы. А лучше вообще отказаться от картинок в бэкграунде у хедер.
0
gogolik
ᕕ( ᐛ )ᕗ
610 / 457 / 241
Регистрация: 13.03.2010
Сообщений: 2,001
14.02.2020, 09:12 9
Сделать картинку побольше размером, далее:
CSS
1
2
background: url(img/Header.jpg) center no-repeat;
background-size: cover;
Это приведёт к тому, что изображение растянется на весь .header.

Далее, нужно задать ему ширину равную .grid-container, если я правильно понимаю задачу. Вообще, было бы проще, если бы вы приложили все стили, чтобы можно было понять полную картину бедствия.
0
slavek777
5 / 5 / 1
Регистрация: 15.09.2016
Сообщений: 337
Завершенные тесты: 1
14.02.2020, 13:15  [ТС] 10
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<style>
 
  .header
  { 
  height: 8em;
  padding: 2em 10%;    
 
    
  }
  
    
.header,
.footer {
  background-color: Gold;
   height: 70px;
}
 
.aside {
  background-color: #49423d;
}
 
.main {
  background-color: DimGrey;
  
}
 
.m {
  background-color: Gray;
   height: 16.4%;
}
 
.header,
.main,
.aside,
.m,
.footer {
  border: solid 1px red;
  
}
 
* {
  margin: 0;
  padding: 0;
}
 
.page {
  
  margin: auto;
}
 
.grid-container {
  display: grid;
  height:100vh;
  grid-template-columns: 2fr 6fr 2fr 2fr;
}
 
  
  
/* Smartphones (вертикальная и горизонтальная) ----------- */  
@media only screen and (min-width : 350px) and (max-width : 641px)
{
  .grid-container 
  {
    grid-template-columns: 1fr;
  }
  
  .aside 
  {
  display: none;
   }
  
  }
  
}
 
  
</style>
0
slavek777
5 / 5 / 1
Регистрация: 15.09.2016
Сообщений: 337
Завершенные тесты: 1
14.02.2020, 13:29  [ТС] 11
Так я хочу картинку (пусть не через бэкграунд, а банально через img src кинуть в нужное место в странице. бросить через отступы в нужное место. Отступы 2f и 2f соответственно (справа и слева).
0
Миниатюры
Центрирование изображения внутри элемента  
slavek777
5 / 5 / 1
Регистрация: 15.09.2016
Сообщений: 337
Завершенные тесты: 1
14.02.2020, 13:45  [ТС] 12
А связка: контейнер div для изображения + css (margin_left/margin_right не дает вообще ничего). Картинка исчезает

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
///...
 
.head_img
  {
    margin-left: 20%;
    margin-right: 20%;
  }
 
.header
  { 
  height: 8em;
  padding: 2em 10%;      
  }
  
////...


HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
  <div class="page">   
    <div class="header"> 
      <div class="head_img><p><img src="img/Header.jpg"></p></div></div>
    <div class="grid-container">
      <div class="aside">Left</div>
      <div class="main">Main</div>
      <div class="block">
        <div class="m">M</div>
        <div class="m">M</div>
        <div class="m">M</div>
        <div class="m">M</div>
        <div class="m">M</div>
        <div class="m">M</div>
      </div>
      <div class="aside">Right</div>
    </div>
    <div class="footer">Footer</div>
  </div>
</body>
0
Миниатюры
Центрирование изображения внутри элемента  
14.02.2020, 13:45
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.02.2020, 13:45

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Центрирование картинки внутри блока div
&lt;div class=&quot;photo_container&quot;&gt; &lt;div class=&quot;photo_block_1_1&quot;&gt; &lt;div class=&quot;photo_1_1&quot;...

Центрирование объектов внутри ячеек таблицы
Необходимый результат: внутри ячеек таблицы находятся таблицы. Необходимо чтобы вложенные таблицы в...

Центрирование изображения в блоке
Всем привет. Есть такой код: &lt;div class=&quot;project first-project&quot;&gt; &lt;img...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.