Атрибут стиля ширины не соблюдается должным образом в html?

Я работаю с компонентом Img Gatsby, но не могу понять, как правильно установить ширину. Кажется, что он игнорирует ширину и просто выбирает свою ширину. Изображение должно быть ровно 276 пикселей, как указано в атрибуте ширины, а текстовый контейнер при необходимости должен быть уменьшен.

Почему с html не работает такая простая вещь, как явная ширина? Что мне не хватает?

Сайт WIP можно найти здесь https://lucid-noether-af1c61.netlify.com/

Вывод карты в формате HTML (изображение и srcset удалены)

<a class="card blog-card" href="/Code coverage for your repo/">
  <div class="card-img-container gatsby-image-wrapper"
    style="position: relative; overflow: hidden; display: inline-block; width: 276px;"><img
      src="data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAUCAwT/xAAVAQEBAAAAAAAAAAAAAAAAAAABAP/aAAwDAQACEAMQAAABWW5Iw9EwP//EABoQAAICAwAAAAAAAAAAAAAAAAABAxECEiH/2gAIAQEAAQUC41GYyUmy2bM//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQIBAT8BR//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABsQAAMAAgMAAAAAAAAAAAAAAAABESExYXGB/9oACAEBAAE/IXJiekLTnbMe2MTiOYUNn//aAAwDAQACAAMAAAAQDz//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPxBX/8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Qg//EAB0QAAICAgMBAAAAAAAAAAAAAAERACFBYTFRcZH/2gAIAQEAAT8QdELgq5PimJlqlZWDgwqQt3LAWC6qZh9n/9k="
      alt=""
      style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 0; transition-delay: 500ms;">
    <picture>
      <source media="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg" srcset="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg 1x,
  /static/47e1d99f504ee308027e0b7670c909dc/2055f/reinterpretcode.jpg 1.5x,
  /static/47e1d99f504ee308027e0b7670c909dc/b8c04/reinterpretcode.jpg 2x"><img srcset="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg 1x,
  /static/47e1d99f504ee308027e0b7670c909dc/2055f/reinterpretcode.jpg 1.5x,
  /static/47e1d99f504ee308027e0b7670c909dc/b8c04/reinterpretcode.jpg 2x"
        src="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg" alt="" width="276" loading="lazy"
        style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; opacity: 1; transition: opacity 500ms ease 0s;">
    </picture><noscript>
      <picture>
        <source media="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg" srcset="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg 1x,
  /static/47e1d99f504ee308027e0b7670c909dc/2055f/reinterpretcode.jpg 1.5x,
  /static/47e1d99f504ee308027e0b7670c909dc/b8c04/reinterpretcode.jpg 2x" /><img loading="lazy" width="276" srcset="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg 1x,
  /static/47e1d99f504ee308027e0b7670c909dc/2055f/reinterpretcode.jpg 1.5x,
  /static/47e1d99f504ee308027e0b7670c909dc/b8c04/reinterpretcode.jpg 2x"
          src="/static/47e1d99f504ee308027e0b7670c909dc/731d3/reinterpretcode.jpg" alt=""
          style="position:absolute;top:0;left:0;opacity:1;width:100%;height:100%;object-fit:cover;object-position:center" />
      </picture>
    </noscript>
  </div>
  <article class="card-body">
    <h2 class="card-title">Code coverage for your repo</h2>
    <p class="card-text">Which unit tests am I missing? This was the question I was facing when writing unit tests for
      Singularity. Since Singularity is a dependency…</p>
    <div class="card-subtext muted-text">
      <p>Posted:<time datetime="2018-11-07T18:48:51.000Z"></time></p>
      <p>devopsunittest</p>
    </div>
  </article>
</a>

Источник

4 ответа

Решение

Прежде всего, я предлагаю не использовать так много встроенных стилей, потому что с этим сложно справиться. Вместо этого используйте классы CSS.

Ты можешь попробовать:

.card-img-container {
    flex-basis: 276px;
}

.card-body {
    flex-grow: 0;
    flex-basis: calc(100% - 276px);
}

Или

.card-img-container {
    min-width: 276px;
}

Я не знаю, чем вы хотите заниматься на мобильном телефоне. Вы можете изменить эти стили в соответствии с вашими потребностями.

Источник

У вас есть два тега, которые устанавливают element.style width: 100% вместо того 276px.
Вdiv который содержит классы: card-img-container gatsby-image-wrapper также имеет overflow: элемент установлен как hidden. Я бы удалил это, иначе ваше изображение будет обрезано.
Наконец, если вы удалите абсолютное позиционирование на<img> теги будут установлены в размер, который вы ищете.

Источник

Просто сделайте так, чтобы корпус карты увеличивался и уменьшался.

.card-body {
    padding: 1.5em 1.3em;
    /* flex-grow: 1; */
    flex: 1 1 0%;
}

Или установить гибкую основу на контейнере изображения также будет работать:

.card-img-container {
    flex: 0 0 276px;
}

Боковое примечание: Сохранение изображения absolute и процентное соотношение вполне нормально, так как оно сохранит ширину ближайшего родителя с относительной позицией, причем это будет 276pxв этом случае контейнер родительского изображения. Здесь просто нужно расправить согнутые элементы.

Источник

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

Здесь есть два возможных исправления:

1- Удалить position: absolute из атрибута стиля изображения или

2- Установите ширину 276 пикселей для самого изображения, а не для его родительского div.

Источник
Другие вопросы по тегам