Наследование размеров только в том случае, если они указаны в родительском элементе

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

Один из элементов может содержать элемент <img> или <canvas>. Если для настраиваемого элемента не указаны размеры, это должен быть размер дочернего элемента по умолчанию. Если указано одно или несколько измерений, они должны быть унаследованы дочерним элементом.

Для моего первого усилия я подумал, что значение CSS inherit будет достаточно хорошим:

my-el img, my-el canvas {
    width: inherit;
    height: inherit;
    max-width: inherit;
    min-width: inherit;
    max-height: inherit;
    min-height: inherit;
}

Однако это не работает, если для ширины или высоты для <my-el> применяется процент. Вместо этого дочерний элемент занимает тот же процент от своего родителя.

Я пробовал различные другие попытки решения и искал всюду, безрезультатно. Я думаю, что чистое решение CSS может быть невозможно, но я надеюсь, что кто-то может доказать обратное.

Чтобы уточнить, конечный результат должен состоять в том, что <my-el> ведет себя как сам встроенный элемент, как если бы он был <img> со своими внутренними измерениями. Если вы не задаете ширину или высоту этих элементов, они по умолчанию имеют внутренние размеры. Когда вы устанавливаете ширину или высоту, это имеет приоритет, и любое "внутреннее" содержимое изменяется соответствующим образом. _{(По крайней мере, я надеюсь, что это разъясняется!)}

Ответ 1

Процентная ширина и высота относительно родительского элемента, поэтому вы, вероятно, можете просто использовать это, я думаю.

my-el {
    display: inline-block;
}
my-el img, my-el canvas {
    width: 100%;
    height: 100%;
}

Не забудьте поиграть, установив любую ширину и высоту на my-el, посмотрите, работает ли она для вас.

http://jsfiddle.net/6afdbfck/

Ответ 2

Вы можете использовать min-width:100% - min-height:100% в качестве резервной копии для ситуации, когда процентная ширина назначается родительскому div:

 my-el img, my-el canvas {
   width: inherit;
   height: inherit;
   max-width: inherit;
   min-width:100%;
   max-height: inherit;
   min-height: 100%;
 }

скрипка

Ответ 3

Если я полностью не понимаю ваши требования, тогда вам нужно всего лишь:

my-el {display: inline-block;}

Чтобы дочерний элемент применял атрибуты родительского использования:

my-el > img,
my-el > canvas {
    height: auto;
    max-width: 100%;
    width: 100%;
}

FWIW, возможно, лучше добавить класс к вашему элементу, как к крюку, и прикрепить свои стили к этому, а не напрямую нацелить элемент, например:

<myelement class="my-el"><img></myelement>

.my-el {display: inline-block;}

.my-el > img,
.my-el > canvas {
    height: auto;
    max-width: 100%;
    width: 100%;
 }

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

.my-el > * {
    height: auto;
    max-width: 100%;
    width: 100%;
 }

Ответ 4

Думаю, я не понимаю вопроса. Если вы можете установить встроенные стили на img/canvas, вы должны быть отсортированы с использованием width/height: 100%, поскольку они будут переопределены встроенными стилями.

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

http://jsfiddle.net/6vygke92/5/

.my-el img, .my-el canvas {    
    display: block; 
    width: 100%;
    height: 100%;
    max-width: inherit;
    min-width: inherit;
    max-height: inherit;
    min-height: inherit;
}

Ответ 5

Как ваши клиенты задают ширину или высоту для настраиваемого элемента? В любом случае, вы можете сделать это:

my-el img, my-el canvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

В нем указано, что img/canvas будет таким же широким, как и их значение по умолчанию, но не должно быть больше, чем их родитель. Изображения будут сохранять свои пропорции, оставляя пустое пространство под ними или с правой стороны, как вы можете видеть в этой скрипке http://jsfiddle.net/vendruscolo/yrvfz1fw/9/

Если вы хотите, чтобы изображения растягивались, чтобы заполнить доступное пространство, вы можете вместо этого

my-el img, my-el canvas {
    display: block;
    width: 100%;
    height: 100%;
}

Пока вы меняете элементы с процентами или с меньшей шириной, вы в порядке. Когда вы устанавливаете явную (большую) ширину с использованием пикселей, изображение останавливается, чтобы сохранить его соотношение сторон, так как вы можете видеть http://jsfiddle.net/vendruscolo/zz6gnytt/2/ В этом случае, если вы хотите сохранить соотношение сторон, вам нужно будет запросить naturalWidth и naturalHeight изображения и сделать свою собственную математику, чтобы сохранить соотношение сторон.

Ответ 6

Надеюсь, на этот раз мой код будет работать

my-el {
    width: 50%;
    border: 1px solid silver;
}

my-el img, my-el canvas {
    width: inherit;
    height: inherit;
    max-width: inherit;
    min-width: inherit;
    max-height: inherit;
    min-height: inherit;
    position: relative;
}

<my-el>
  <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png" />
</my-el>