Img по отношению к содержанию div

Оригинальный вопрос

Каков наиболее эффективный способ вычисления ширины изображения по отношению к нему, содержащего div в css?

У меня есть следующий фрагмент, который устанавливает #image1.width в проценты, которые относятся к ширине его родителя. Я использую процент, потому что мне нужно, чтобы изображение масштабировалось пропорционально родительскому объекту при изменении размера экрана.

div {
  position: relative;
  display: block;
  width: 100%;
}

#image1 {
  position: absolute;
  left: 10%;
  top: 10%;
  width: 29.43%;
  height: auto;
}

#under {
  width: 100%;
}

<div>
  <img id="image1" src="http://placehold.it/206x115">
  <img id="under" src="http://placehold.it/700x300/ff00f0/ffffff">
</div>

Ответ 1

К сожалению, у CSS нет родительского селектора. Хотя вы не можете сделать элемент относительно родительского напрямую с CSS, то, что вы можете делать с чистым CSS, задает переменную, которую используют оба элемента:

:root {
--width: 90vw; // Must be viewport-driven
}

Теперь вы можете использовать эту переменную как (фиксированную) ширину родительского элемента, и расчетную ширину дочернего элемента:

#under {
  width: var(--width);
}

#image1 {
  width: calc(var(--width) / 3); // The 3 can be replaced with any float
}

Обратите внимание, что переменная должна быть либо фиксированной единицей, либо относиться к окну просмотра. Если бы это было основано на процентах, то как #under, так и #image1 основывали бы свою ширину у своих соответствующих родителей. Чтобы эта работа работала оперативно, она должна основываться на окне просмотра.

:root {
--width: 90vw;
}

div {
  position: relative;
  display: block;
  width: 100%;
}

#image1 {
  position: absolute;
  left: 10%;
  top: 10%;
  width: calc(var(--width) / 3);
  height: auto;
}

#image2 {
  position: absolute;
  left: 25%;
  top: 10%;
  width: 10%;
  height: auto;
}

#under {
  width: var(--width);
}

<div>
  <img id="image1" src="http://placehold.it/206x115">
  <img id="under" src="http://placehold.it/700x300/ff00f0/ffffff">
</div>

Ответ 2

Я понимаю, что вопрос подсказывает чистое решение CSS, но я либерально интерпретировал это как значение "нет JavaScript".

В этом ключе, здесь решение с использованием встроенного SVG:

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" viewBox="0 0 700 300">
     
  <image x="0" y="0"
      xlink:href="http://placehold.it/700x300/ff00f0/ffffff"/>
  <image x="10%" y="10%"
      xlink:href="http://placehold.it/206x115"/>
</svg>

Ответ 3

Лучший подход, который, я думаю, будет заключаться в том, чтобы исключить ширину и использовать шкалу для соответствия div, но проблема в масштабном преобразовании не принимает никакого значения единицы, например% или px или vw/vh!

.common_img_class{
    transform: scale(calc(100vw/700)); /* this won't work! */
    /* Idea here is to let image take is original width & then scale with respact to base image scaling. Base image scaling is detenined by *window_width/base_image _width*, here base image width is 700 as per you example */
}

Таким образом, второе лучшее, что я могу придумать, - это исключить ручной расчет процентов. Используйте функцию calc(), чтобы сделать это для вас.

#firsrt_img{
    width: calc((206/700) * 100%);
}
#second_img{
    width: calc((306/700) * 100%);
}

Здесь вам по-прежнему приходится писать ширину для всех, но по крайней мере, по сравнению с процентом расчета.

Примечание:
Если кто-то может помочь с первым подходом, их вклад приветствуется.

Ответ 4

Одна вещь, которая может работать, если вы хотите использовать загрузку (https://getbootstrap.com/examples/grid/):

<!-- parent -->
<div class="row">
  <div class="col-md-6">
    <img src="">
    <!-- this is 50% of the screen for min 992px, a full line otherwise -->
  </div>
  <div class="col-md-3">
    <img src="">
    <!-- this is 25% of the screen for min 992px, a full line otherwise-->
  </div>

  <div class=col-md-3>
    <img src="">
    <!-- this is 25% of the screen for min 992px, a full line otherwise -->
  </div>
</div>

Вы можете группировать их по своему усмотрению, просто помните, что числа должны быть добавлены к 12 (в моем примере, 6 + 3 + 3). Вы можете добиться эффекта 100% ширины, используя col-md-12. Кроме того, инфикс md является лишь одним из нескольких вариантов обрезания между помещением всего на одну строку и элементов укладки. Вы можете проверить http://getbootstrap.com/css/#grid для получения более подробной информации, а также несколько примеров.

Ответ 5

Вдохновленный ответом Робби Корнелиссеном, вот подход, который работает в целевых браузерах в настоящее время, Его единственным недостатком является то, что размеры изображений должны быть указаны в HTML (ну, собственно, SVG) явно.

Вот демон .

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" viewBox="0 0 700 300">
     
  <image x="0" y="0" width="700" height="300"
      xlink:href="#" onclick="location.href='http://placehold.it/700x300/ff00f0/ffffff'; return false;"/>
  <image x="10%" y="10%" width="206" height="115"
      xlink:href="#" onclick="location.href='http://placehold.it/206x115'; return false;"/>
</svg>