Адаптация контента и отцентровка фото, как сделать (оцинтровку при сжатии экрана)?

Question

[Антон Вебсайтовский]

Здравствуйте.
Как реализовать оцинтровку фоток при сжатии экрана, когда сжимаем до определенного момента что текст который рядом он выстраивается в столбик по 1-2-3-4 буквы, что не очень красиво и я хочу сделать чтобы фотка центровалась и тогда будет отлично.

Чтобы было понятно о чем я, прикрепил скрин. (в скрине выделил красной рамкой).


У меня там небольшой замут идет если фотка по левую сторону то отступы другие, если по правую то отступы тож другие.

.catinf img{
  width: 790px;
  max-width: 100%;
  margin:10px 0 10px 0;
}
.catinf img[style*="left;"] {
  margin: 5px 20px 10px 0;
  height: 100%;
}
.catinf img[style*="right;"] {
  margin: 5px 0 10px 20px;
  height: 100%;
}

@media only screen and (max-width: 500px) {
  .catinf img[style*="left;"] {
    margin: 5px 0px 10px 0;
    height: 100%;
    text-align: center;
  }
  .catinf img[style*="right;"] {
    margin: 5px 0 10px 0px;
    height: 100%;
    text-align: center;
  }
  .catinf img{
    text-align: center;
    margin: 0 auto;
  }
}

Answer 1

[Антон Вебсайтовский]

Черезе js решил вопрос.

function resize_document(){
				var width = $(window).width();					
				
				if (width < 600){
					$(".catinf img").addClass('img_minimize');					
				}else{			
					$(".catinf img.img_minimize").removeClass('img_minimize');	
				}
			}
	  		resize_document();
	  
			$(window).resize(function(){
				resize_document();
			});

.img_minimize{
	float:none!important;	
	display: block!important;
    margin: 0 auto!important;	
	margin-top: 5px!important;
	margin-bottom: 10px!important;
}

Answer 2

[boga-net]

Вам такое надо ?
https://jsfiddle.net/ouodkeLn/12/

обновил

Comments

[Антон Вебсайтовский]

не так не подойдет, у меня же css определяет если у картинки есть [style*="right;"], то он ей присваивает стиль для картинки которая идет по правому краю.

а вообще чет типа того. но в моем варианте.
а через ваш вариант надо в ручную вставлять в див лево или право, это вообще не-то, я не трогаю дивы ! css с моим вариантом сам проверяет если у картинки есть стуле по левому или правому краю то срабатывает класс для данной картинки.

Answer 3

[Дмитрий]

Очень костыльный вариант. Почитайте про адаптивную вёрстку, тогда сразу поймёте, как, зачем и почему.
Вариант выше хороший. Можно просто задать изображению display: block и тогда займёт всю ширину (если вы делали на флоатах)

Comments

[Антон Вебсайтовский]

я так пробовал.

[Антон Вебсайтовский]

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