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

ОК, я получил бит контейнера, но есть проблема. Я хочу, чтобы изображение изменяло его размер в зависимости от разрешения экрана, чтобы оно не выглядело странно.пытается использовать контейнер для изображения, но хочет изменить размер изображения, исходящего из разрешения экрана.

это мой код до сих пор

index.html

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title> 
<link rel="stylesheet" type="text/css" href="CSS/main.css"> 
</head> 
<body> 
<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#contact">Contact</a></li> 
</ul> 
<div class="main_image"></div> 
<div class="image123"> 
    <div class="imgContainer"> 
     <img src="Image/test_image_slot.jpg"/> 
     <p>This is image 1</p> 
    </div> 
    <div class="imgContainer"> 
     <img src="Image/test_image_slot.jpg"/> 
     <p>This is image 2</p> 
    </div> 
    <div class="imgContainer"> 
     <img src="Image/test_image_slot.jpg"/> 
     <p>This is image 3</p> 
    </div> 
    <div class="imgContainer"> 
     <img src="Image/test_image_slot.jpg"/> 
     <p>This is image 4</p> 
    </div> 
</div> 
</body> 
</html>

main.css

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    background-color: #360836; 
    text-align:center; 
} 

li { 
    display:inline; 
} 

li a { 
    display: inline-block; 
    color: #d14977; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
    -o-transition:.5s; 
    -ms-transition:.5s; 
    -moz-transition:.5s; 
    -webkit-transition:.5s; 
    transition:.5s; 
} 

li a:hover { 
    color: white; 
} 

div.main_image { 
content:url(../Image/everest.jpg); 
    max-width: 100%; 
    height: auto; 
    width: auto\9; 
} 

.imgContainer{ 
    float:left; 
}

что я могу сделать, чтобы сделать изображение размер его самоуправления или может быть, я задаю неправильный вопрос, я просто хочу сделать 4 изображения в одной строке и автоматическое изменение размера изображения в зависимости от разрешения экрана без использования javascript только html и css.

источник

2015-12-09 WESTKINz

.imgContainer{ 
    width:25%; 
} 
.imgContainer img{ 
    max-width:100%; 
    //or: width:100%; 
}

Это должно заставить его работать ... В принципе, мы задаем ширину на 25%, так как 25x4 = 100, а затем установить максимальную ширину на изображение внутри так они не растягивают контейнер.

источник

2015-12-09 15:18:24 Salketer

та же проблема, что и @Johannes пост создает 4 строки – WESTKINz

Общий ответ правильный; однако я бы изменил 'max-width' на просто' width'. http://jsfiddle.net/4hp1dc4z/ –

@JosephMarikle вы правы, ширина может быть лучше максимальной ширины ... Все зависит от изображений и от того, как вы хотите, чтобы они реагировали. – Salketer

imgContainer { width: 25%; } 
imgContainer img { width: 100%; height: auto; }

должен сделать это

источник

2015-12-09 15:17:58 Johannes

hmmm теперь есть 4 строки – WESTKINz

Я забыл: вам нужно 'float: left;' для контейнеров – Johannes

Кажется, что нужно работать ... http://jsfiddle.net/4hp1dc4z/ Edit: OP, вероятно, забыл также сохранить 'float: left' в '.imgContainer' –

Используя «display: table» в сочетании с «display: table-cell», вы решили свою проблему.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Page Title</title> 
 
    <style> 
 
     ul { 
 
      list-style-type: none; 
 
      margin: 0; 
 
      padding: 0; 
 
      background-color: #360836; 
 
      text-align: center; 
 
     } 
 
     li { 
 
      display: inline; 
 
     } 
 
     li a { 
 
      display: inline-block; 
 
      color: #d14977; 
 
      text-align: center; 
 
      padding: 14px 16px; 
 
      text-decoration: none; 
 
      -o-transition: .5s; 
 
      -moz-transition: .5s; 
 
      -webkit-transition: .5s; 
 
      transition: .5s; 
 
     } 
 
     li a:hover { 
 
      color: white; 
 
     } 
 
     .main_image { 
 
      width: 100%; 
 
      min-height: 50px; 
 
      background-color: #ccc; 
 
     } 
 
     .imgContainer { 
 
      display: table-cell; /*IE8+ and non-IE */ 
 
      background-color: #efefef; 
 
      text-align: center; 
 
     } 
 
     .image-wrap { 
 
      display: table; /*IE8+ and non-IE */ 
 
      width: 100%; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <ul> 
 
     <li> 
 
      <a class="active" href="#home">Home</a> 
 
     </li> 
 
     <li> 
 
      <a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 
    <div class="main_image"></div> 
 
    <div class="image-wrap"> 
 
     <div class="imgContainer"> 
 
      <img src="Image/test_image_slot.jpg" /> 
 
      <p>This is image 1</p> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="Image/test_image_slot.jpg" /> 
 
      <p>This is image 2</p> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="Image/test_image_slot.jpg" /> 
 
      <p>This is image 3</p> 
 
     </div> 
 
     <div class="imgContainer"> 
 
      <img src="Image/test_image_slot.jpg" /> 
 
      <p>This is image 4</p> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

источник

2015-12-09 15:27:27

Попробуйте

.imgContainer { 
    width:25%; 
    height: auto; 
} 
.imgContainer img { 
    width:100%; 
    height: auto; 
}

Во всяком случае, войти в контакт с BOOTSTRAP - это очень полезно. Когда вам нужно масштабировать изображения в бутстрапе, вы просто добавляете - например, класс col-lg-3 (12/4 = 3), чтобы поместить 4 изображения подряд - подумайте об этом приятель ;-)

источник

2015-12-09 15:29:58 sgracki

им в настоящее время практикующий бутстреп все еще noob на нем :) – WESTKINz

На https://divshot.com/ вы можете быстро создать загрузочную страницу - код чтения поможет вам понять;) Мир! – sgracki

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

ответ

Смежные вопросы