Изображение без изменения размера с браузером (только CSS / HTML) - PullRequest
Новая
       44

Изображение без изменения размера с браузером (только CSS / HTML)

0 голосов
/ 28 мая 2020

В моем текущем проекте все, что я хочу, - это использовать CSS / HTML только для того, чтобы мое изображение внутри a изменялось вместе с размером страницы. У меня это работало на предыдущем сайте, а теперь ... этого просто нет. Когда окно браузера изменяется, оно просто обрезает изображение с правой стороны; никакого изменения размера вообще. 

@charset "utf-8";
/* CSS Document */

div.divBannerScale {
	width: 100%;
	height: auto;
}

img.bannerScale {
  max-width: 100%;
  min-width: 40%;
  height: auto;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Website</title>
<link href="/css.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="bannerDIVcontainer" class="divBannerScale">
	<img src="Images/bannerFull-01.png" width="2561" height="445" class="bannerScale" />
</div>

</body>
</html>

Я пробовал добавлять margin: 0 auto, display: block, padding, et c для каждого класса div и image, но в конечном итоге удалил их, так как это не имело значения. (И в прошлом не было необходимости.)

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

Любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 28 мая 2020

Возможно, ваше изображение уже составляет 40% от исходного размера? В моем тестировании код, казалось, работал нормально.

Обрезка всего лишнего, CSS просто оставляет (если минимальная ширина действительно была слишком большой): 

img.bannerScale {
  max-width: 100%;
  min-width: 1%;
  height: auto;
}

Вы можете видеть живой пример здесь .

Обратите внимание, что вам не нужно ничего делать с размером div, поскольку он будет таким же большим, как и все, что вы в него поместили (при условии, что вы не делать ничего фанкового, например, абсолютного позиционирования)

...