Не удается изменить размер изображения в сводке по семантическому интерфейсу

Question

Не удается изменить размер изображения в сводке по семантическому интерфейсу

1

Я использую код примера и пытаюсь немного узнать о семантическом интерфейсе. Мне нравится представление Feed, но я хотел бы добавить еще один аватар/мини-изображение в конце моей итоговой строки. Я могу получить другое изображение, но я не могу изменить размер этого изображения, как и везде, через классы (ui, image, mini). Мое исходное изображение 200px x 200px

<div class="ui feed">
  <div class="event">
    <div class="label">
      <img src="/images/avatar/small/jenny.jpg">
    </div>
    <div class="content">
      <div class="date">
        3 days ago
      </div>
      <div class="summary">
         You added <a>Jenny Hess</a> to your <a>coworker</a> group.
         <img src="/images/wireframe/image.png"> <!-- This is the problem image. Its 200x200 and I can't seem to resize it -->
      </div>
    </div>
  </div>
</div>

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

.summary img { height: 35px; width: 35px; }

но это, похоже, не имеет значения. Также не использует атрибут height/width для себя.

Нужно ли мне уточнять мой css?

rschlachter 05 авг. 2018, в 02:52

Источник

Теги:

javascript

vue.js

css

semantic-ui

1 ответ

Ещё вопросы

josip · Accepted Answer · 2018-08-05T03-57-00.000Z

вам необходимо обернуть изображение в контейнер гибкой коробки и установить максимальную ширину или максимальную высоту следующим образом:

 .summary {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
 }
    
.avatar {
   display: flex;
   max-width: 32px;
   max-height: 32px;
 }

   <div class="ui feed">
      <div class="event">
        <div class="label">
          <img src="/images/avatar/small/jenny.jpg">
        </div>
        <div class="content">
          <div class="date">
            3 days ago
          </div>
          <div class="summary">
              <div class="summary-text">
                You added <a>Jenny Hess</a> to your <a>coworker</a> group.
              </div>
             <div class="avatar">
               <img src="http://via.placeholder.com/200x200">
             </div>
              <!-- This is the problem image. Its 200x200 and I can't seem to resize it -->
          </div>
        </div>
      </div>
    </div>