Having trouble adjusting the image size in the Semantic UI Feed Summary component

Currently experimenting with the example code to expand my knowledge of Semantic UI. The Feed view caught my eye, but I am interested in adding another avatar/mini image at the end of my summary line. While I can successfully insert the additional image, I'm having difficulty resizing it using classes (ui, image, mini) like I normally would. The original image is sized at 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>

Running Vue on my project, though unsure if that has any relevance. I attempted an inline style within my component:

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

Regrettably, this approach did not yield the desired outcome. Setting the height/width attribute directly on the image tag also proved ineffective.

Could a more specific CSS rule be necessary?

javascriptcssvue.jssemantic-ui

Answer №1

To make your image resizable, you can enclose it within a flex box container and specify the maximum width or height using the following code:

 .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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with an XMLHttpRequest using app.post in node.js with express (JavaScript)

In my current project, I am working on implementing a filter functionality using checkboxes. The concept involves creating HTML for the checkbox that triggers a script to send DOM data to the server. Here is an example of the HTML code: <div class=&quo ...

javascriptnode.jsexpressxmlhttprequest

Is there a way to make all DIVs in the same class have the same height as the tallest div?

I have 3 identical divs with an auto height value. How can I set the height of all divs in the same class to be equal to the highest div's height? Same Class Div Thank you in advance. ...

htmlcss

Using HTML div tags to create a looping expression that can interact with Javascript

Currently, I am working on a Ruby on Rails project and I am facing a challenge with looping variables in an HTML form to reduce the amount of manual code I have to write. However, when I attempt to evaluate an expression in the id attribute, the JavaScript ...

javascriptjqueryhtmlruby-on-railsturbolinks

Utilizing CSS position sticky in Bootstrap 4 to maintain visibility of a sidebar

I currently have a layout with two columns structured like this: <div class="row"> <div class="col-xs-8 content"> </div> <div class="col-xs-4"> </div> </div> By applying the position:sticky to the si ...

csstwitter-bootstrapcss-positionbootstrap-4twitter-bootstrap-4

Validating Laravel emails with JavaScript blur and utilizing AJAX and jQuery

Looking for a way to validate a form in Laravel without hitting the submit button? I've tried some code, but only the email format validation seems to be working. Any tips on what I should do next? I'm new to Ajax. PS: When I enter a valid email ...

javascriptphpjqueryajaxlaravel

angular ui-grid event: column clicked

I want to retrieve the selected column value based on the selection of a column in a UI grid. Once I have this value, I need to filter another UI grid table using it. How can I trigger a function when a column is selected and access the selected column val ...

javascriptjqueryangularjsangular-ui-grid

Ways to ensure a div is positioned beneath another div

I am facing an issue with two divs; one on the right and the other on the left. When I try to add a third div below the right div, it ends up appearing under the left div or at the left side of the left div. Here is my current setup: https://i.sstatic.n ...

htmlcss

Understanding the Difference Between WARN and ERR in npm Peer Dependency Resolution

I encountered a puzzling situation where two projects faced the same issue, yet npm resolved them differently: https://github.com/Sairyss/domain-driven-hexagon npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! W ...

javascriptnode.jsnpmnpm-install

Issue with resetting the state of a react-select component remains unresolved

I'm currently facing two issues with my react-select component: Firstly, once I select an option, I am unable to change it afterwards. Second, when my form is reset, the react-select component does not reset along with the other fields. For simplici ...

javascriptreactjs

In React, ensure a component's state is preserved when the browser history changes

I recently developed a React application that features a classic layout with a left-side menu, title, footer, and main content section. The side menu includes navigation links structured using components such as <List>, <ListItem>, etc. from th ...

javascriptreactjsmaterial-ui

Is there a preferred method for looping through a NodeList and transferring its elements without the need to convert them into an Array?

Take a look at this jsFiddle that showcases the issue. It seems that while iterating over and making changes to the NodeList directly, the counter variable i skips every other node. In the provided fiddle example, there are two lists, #one and #two, and t ...

javascripthtmlarraysdomidioms

Unexpected behavior occurs when ajax is added to an array for jQuery promise results

In my code, I have an each loop that makes individual AJAX requests and stores them in an array like this: var promises = []; $items.each(function(k, v) { promises.push( $.ajax({ url: ..., .... }) ); }); $.when.app ...

javascriptjqueryajax

The server is showing a discrepancy in date comparisons with MomentJS

I am struggling with grouping events by day in my application. While it works correctly in the development environment (Brazil), on the server (USA) the events that occur at the end of the day are being placed at the beginning of the next day. I suspect th ...

javascriptnode.jsdatetimezonemomentjs

Arranging three buttons in a row with a larger button positioned on top

I'm struggling to implement my image button webpage. I can't seem to properly align three buttons at the bottom of the page. .fullwidth { width: 100%; height: 80%; margin-left: 0; margin-right: 0; ...

htmlcss

What is the proper way to utilize variables in package.json with npm version 7.x.x?

I am looking to utilize npm scripts to access keys found in the directories section. "directories": { "client": "client", "server": "server" }, "scripts": { "test:client&qu ...

javascriptnode.jstypescriptnpm

Pick the final offspring of the HTML element that is not assigned to a specific class

Currently, I am attempting to target the final element of a child that lacks a specific class. You can view my progress on this JSFiddle. <aside class="col2"> <div class="infobox teal"></div> <div class="infobox mediumbrown"&g ...

jquerycss

Exploring nested maps in JavaScript

I attempted to nest a map within another map and encountered an issue where the innermost map is being executed multiple times due to the outer map. The goal is to link each description to a corresponding URL (using # as placeholders for some links). Here ...

javascriptreactjsmapping

Attempting to shift an element without relying on the use of position:relative

I'm trying to figure out if I can relocate this (image1) to (image2). I prefer not to utilize position:relative as it may disrupt my design in bootstrap. Image 1 (I don't want it here) Image 2 ( I want it here) Here is the relevant CSS code: ...

htmlcss

Utilizing Anglar 16's MatTable trackBy feature on FormGroup for identifying unaltered fields

In my application, I am working with a MatTable that has a datasource consisting of AbstractControls (FormGroups) to create an editable table. At the end of each row, there are action buttons for saving or deleting the elements. My goal is to implement tr ...

javascriptangularangular-materialangular-material-tableformgroups

Exporting Data from Angular's ui-grid to Excel

I am currently facing a scenario where I receive significant response data from a REST service to the Angular UI-Grid. Rather than rendering all the data simultaneously, I would like to display it in batches, while still having the option to export all t ...

javascriptangularjsangular-ui-grid