One interesting aspect of Flexbox is how it handles image resizing. When you resize the width of an image within a flex container, the height does not adjust proportionally. This causes the image to appear stretched.
div {
display: flex;
flex-wrap: wrap;
}
img {
width: 50%
}<div>
<img src="https://i.imgur.com/KAthy7g.jpg" >
<h1>Heading</h1>
<p>Paragraph</p>
</div>What is the reason behind this behavior?
When the align-self property is set to its default value of stretch, it causes the element to stretch. To center the element, simply change the value of align-self to center.
align-self: center;
To learn more, refer to the documentation available at: align-self
One of the crucial attributes to remember is align-self: center:
.container {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
}
img.align-self {
align-self: center;
}<div class="container">
<p>Before using align-self:</p>
<img src="http://i.imgur.com/NFBYJ3hs.jpg" />
<p>After using align-self:</p>
<img class="align-self" src="http://i.imgur.com/NFBYJ3hs.jpg" />
</div>Consider using either of the following CSS properties: contain or cover are commonly used
.my-img {
object-fit: contain;
}
or
.my-img {
object-fit: cover;
}
Dealing with a comparable problem, I found success by including the CSS property flex-shrink: 0; to the image element.
margin for image alignment:Our aim was to have the image aligned to the left, so we included:
img {
margin-right: auto;
}
Similarly, for the image to align to the right, we could use margin-right: auto;. The code snippet demonstrates examples of both alignments.
Best of luck...
div {
display:flex;
flex-direction:column;
border: 2px black solid;
}
h1 {
text-align: center;
}
hr {
border: 1px black solid;
width: 100%
}
img.one {
margin-right: auto;
}
img.two {
margin-left: auto;
}<div>
<h1>Flex Box</h1>
<hr />
<img src="https://via.placeholder.com/80x80" class="one"
/>
<img src="https://via.placeholder.com/80x80" class="two"
/>
<hr />
</div>The reason for the stretching is that the default value of align-self is set to stretch. There are two possible solutions in this scenario: 1. Adjust the alignment of the image by setting align-self to center. OR 2. Center the alignment of the parent container by setting align-items to center.
img {
align-self: center;
}
OR
.parent {
align-items: center;
}
When I encountered a similar problem with my navigation bar, none of the suggested solutions seemed to work.
What solved it for me was including height: 100% for the image element.
If you're arranging the items in a horizontal manner, consider including width: 100% as a possible solution.
UPDATE: It appears that Chrome now automatically applies this value, but it's still recommended to include it for compatibility reasons.
Dealing with a similar problem involving a Foundation menu, I found that align-self: center; was ineffective for me.
To resolve this issue, I opted to enclose the image within a
<div style="display: inline-table;">...</div>To style images in tailwindcss, make sure to include the flex-shrink-0 class
I'm interested in developing interactive websites soon and I'm curious about the various technologies I can use to create an engaging web page. I know that HTML5 now supports drawing on a Canvas, even in 3D. Can you recommend any helpful tutoria ...
I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...
Is there a way to determine with JavaScript whether the browser is compatible with the CSS :first-child selector? ...
I am currently developing an input for a website that will generate a div tag along with its necessary child elements to ensure the website functions correctly. I have a couple of key questions regarding this setup: <!DOCTYPE html> <html> < ...
Dealing with multiple iframes on a single page. Each iframe is sourced from my domain. The goal is to automatically calculate and set the height of each iframe on the page. The current code sets all iframe heights to match that of a specific iframe: fun ...
I need to make this box move up and down, but prevent users from clicking it rapidly multiple times to watch it go up and down too quickly. How can I add a 200 millisecond delay on the click or disable clicking for that duration? View the jsfiddle example ...
Recently, I had a navigation bar in the form of an unordered list (ul) with multiple list items (li), and the last li element was labeled 'more' which had its own sub-menu in the form of another ul. To toggle this sub-menu between visible and hid ...
For my project, I am aiming to create a login and register page using TypeScript. Currently, my code is functioning well even without a database. However, I would like to implement Firebase for storing user credentials so that the login process becomes mor ...
I am working on a scenario where I have used CSS to extend the search box when focused. The idea is that when the search box is focused, it should decrease in size and a cancel button should appear next to it. This is the CSS code I am using: .clrble .fr ...
I have successfully removed the outline for a single button, but I am struggling to remove it for a button within a btn-group class. Check out my JSFiddle DEMO This is the HTML code I am working with: <button class="btn btn-primary">Button without ...
Refer to the link provided: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables To conceal empty cells, use the rule empty-cells: hide;. This allows a cell's parent element background to shine through the cell if it is emp ...
How do I eliminate the white spaces on the left, right, and top of my background image that covers the header area above the fold on my webpage? I am currently testing in Google Chrome and using VS Code as my editor. html, body { width: 100%; height: ...
I have set up a navigation bar that hides when the user scrolls down and reappears when they scroll up. I want to keep the navbar code in a separate HTML file for easier editing. .load In the index.html file, the navbar code is included like this: <di ...
For my new website, I am developing a simple checklist feature. To handle the check and uncheck requests from users, I'm using jQuery's $.ajax() function. Whenever a user clicks on the check or uncheck buttons, jQuery retrieves the validation tok ...
I devised a plan to create a moveable div with a handle and came up with this code snippet: var mydragg = function() { return { move: function(divid, xpos, ypos) { divid.style.left = xpos + 'px'; divid.style.top = ypos + &apo ...
Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...
Currently, I'm delving into the world of manipulating CSS using JavaScript: img.style.borderRadius = "100%"; img.style.border = "9px solid #ffffff"; img.style.boxShadow = "0 0 5px #00000070"; img.style.margin = "20px"; I'm wondering how to chan ...
<head> <style> .relative{position:relative; width:600px;} .absolute-text{position:absolute; bottom:1; font-size:12px; font-family:"vedana"; background:rgba(251,251,251,0.5); padding:10px 20px; width:10%; text-align:center;} </style> < ...
My website has an issue with anchor elements appearing too frequently and not in the desired location. I need someone to help fix this so there are only two anchors displayed. After checking my code, it seems like there are not more than the specified num ...
I have a scenario where I want to mute audio that automatically plays when the screen loads. In order to achieve this, I am attempting to add a button that can toggle the audio mute functionality using Typescript within an Angular4 application. The code sn ...