I'm trying to aling image to left side in Angular material with mat-card component, however my image still have some margin (left, up, down). I assume it's because I've used mat-grid.
So what should I do to solve this.
This is what I have:
https://stackblitz.com/edit/angular6-material-components-demo-a3gaj2
And this is what I expect:
<mat-card class="home-card">
<mat-card-content class="home-card-content">
<img mat-card-image
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu">
<div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
</mat-card-content>
</mat-card>
html {
min-height: 100%;
}
body {
height: 100%;
margin: 0px;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.home-card {
border-radius: 4px;
max-width: 600px;
max-height: 1000px;
margin-top: 100px;
padding: 0;
.mat-card-image {
margin: 0;
height: 100%;
}
.home-card-content {
display: flex;
justify-content: space-between;
& > * {
display: flex;
justify-content: center;
align-items: center;
flex: auto;
max-width: 50%;
&:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
&:last-child {
flex-direction: column;
align-items: start;
padding: 8px;
}
}
}
}
You just need to apply only this css to set image, this css set all image same size no matter it is small or big.
object-fit: cover;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
In example on <img> setted margin: 0 -16px 16px -16px; via .mat-card-image
But negative margin is bad practice
Just add you own css selector on <mat-card> with padding: 0
Related
I have a Sidebar which is built using FlexBox column layout as shown below:
.SideBarContainer {
// flex-grow: 1;
width: 100%;
height: 100%;
// display: flex;
// flex-direction: column;
padding: 0.5rem 1rem;
align-items: center;
justify-content: space-evenly;
overflow-y: auto;
overflow-x: hidden;
font-family: $font-family;
}
And looks like:
This is when I comment out flex layout (ideally which I want to keep). But when I enable flex layout as shown below:
.SideBarContainer {
// flex-grow: 1;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 0.5rem 1rem;
align-items: center;
justify-content: space-evenly;
overflow-y: auto;
overflow-x: hidden;
font-family: $font-family;
}
for some reason it forces the image to be shifted to top and it can't be scrolled to the view:
One way would be to get rid of flexbox and somehow align the items to center but I am more interested in understanding how can I achieve the same with FlexBox and what exactly it is that's pushing the image to cut off when flexbox is applied.
I have created this html code and CSS for you:
.main {
width: calc(100%/3 + 60px);
font-family: 'Jost', sans-serif;
}
.SideBarContainer {
display: flex;
flex-direction: column;
}
.name {
margin: 0;
font-size: 30px;
}
.desig {
color: #bcbcbc;
font-weight: 600;
}
.profile-img {
border-radius: 100%;
height: 100px;
width: 100px;
object-fit: cover;
}
.btn {
background-color: #f5f5f5;
color: #000000;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 16px;
padding: 4px 20px;
margin: 10px 0;
width: fit-content;
box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
}
.btn.dark {
background-color: #000;
color: #f3ff26;
text-transform: capitalize;
font-weight: 400;
font-size: 18px;
width: calc(100% - 60px);
border-radius: 8px;
box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
}
<div class="main">
<div class="SideBarContainer">
<img src="https://via.placeholder.com/150x150" class="profile-img" />
<h6 class="name">Rampy sharma</h6>
<span class="desig">Individual Singer</span>
Edit
<p>It is a long established fact that a reader will be distracted by the readable that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.</p>
portfolio
</div>
</div>
I am using React and I am trying to have an overlay over each grid item in a grid. But, what all I try, the overlay seems to come below each grid item and not over the grid item. Even if I use the position: absolute it is not working !
Here's the code I am using for the grid (React):
<div className="home__itemSection">
<div className="item">
<div className="item__container">
<div className="container__imageDiv">
<img
src={""}
alt=""
/>
</div>
<div className="container__detailSection">
<p>{""}</p>
<h6>{""}</h6>
</div>
</div>
<div className="item__overlay">
<h1>{""}</h1>
<h1>{""}</h1>
</div>
</div>
</div>
css:
.home__itemSection {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
margin: 30px 170px 0 170px;
transition: ease all 0.5s;
}
.item {
background-color: #f1f1f1;
height: 350px;
width: 212px;
margin: 0 3rem 1rem 3rem;
height: fit-content;
font-family: "Poppins", sans-serif;
display: flex;
align-items: flex-start;
}
.container__imageDiv {
height: 318px;
width: 212px;
}
.container__imageDiv > img {
height: 318px;
width: 212px;
}
.container__detailSection {
height: 44px;
width: 212px;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 5px;
}
.container__detailSection > p {
color: black;
font-size: 13px;
font-weight: 300;
line-height: initial;
}
.container__detailSection > h6 {
padding-left: 1.8rem;
font-weight: 500;
font-size: 1rem;
}
.item__overlay {
height: 252px;
width: 212px;
background-color: black;
}
Any help is greatly appreciated !
Thank You !
Please add position: relative; on item(parent tag of overlay)
.item{
position: relative;
}
.item .item__overlay{
position: absolute;
left: 0;
top: 0;
}
An element with position absolute is relative to the next parent element with relative (or absolute) positioning.
Add position relative to home__itemSection. Also use height and with to cover all the container:
.home__itemSection {
...
position: relative;
}
.item__overlay {
...
position: absolute;
height: 100%;
width: 100%;
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Did try already several flex arguments but none of them worked like selg-align and self-content.
So the idea is the fit the image to the square and center it vertically and horizontally...
Does anybody can help with this thanks...
I am unsure of the why i need to edit this topic... it's just a simple question on how to fit the image in the square and center it vertically and horizontally (obvious to such square)... Don't understand where is the confusion about the question...
My examples is at https://jsfiddle.net/ej3814sn/
.five {
height: 20%;
border: 1px solid #fff;
}
.five-a {
float: left;
color: white;
}
.five-b {
float: right;
color: white;
}
Thanks in advance
You need to wrap your img in a div and outside of five - Using float is not a good idea at all in modern browsers.
Use flex to achieve your desired results and it is very responsive in modern browsers as well. Also set the height of .one to auto make sure img always centered and below the numbers.
Live Demo:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
width: 100px;
height: auto;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 20%;
display: flex;
justify-content: space-between;
}
.five-a {
color: white;
margin-left: 5px;
}
.five-b {
color: white;
margin-right: 5px;
}
img {
width: 90%;
height: auto;
}
.img-div {
display: flex;
justify-content: center;
align-items: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<div class="img-div">
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</div>
</body>
The best way, to position elements, is to use position property. Notice that I have made a change in HTML code as well. Put the image out of five element. Now talking about CSS, position both img and five as absolute. You would have to set top to 0, width to 100% for five. And for img, just set self-align to center.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
justify-content: center;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
position: relative;
}
.five {
height: 20%;
width: 100%;
position: absolute;
top: 0;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
img {
width: 90%;
position: absolute;
height: auto;
align-self: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</body>
I think you are looking to center the image in the .five div, yes?
EDIT: Remove the image tag and place your image as a background of the element you wish to center it in... Then add no-repeat, 0% to position and set the bg size to 100%, however change the height of the element to 100% as well...
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
/*fit image to the square and center it*/
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<span class="five-a">1</span>
<span class="five-b">10</span>
<img src="">
</div>
</div>
</div>
</div>
</div>
I need to align text near an icon to middle.
See the admin word near the user icon in this sandbox:
https://codesandbox.io/s/fragrant-morning-267l5
I have this css, but it's not taking affect:
.HeaderToolbar {
background-color: black;
color: white;
fill: white;
width: 100%;
margin: 0 auto;
align-items: baseline;
vertical-align: middle;
/*white-space: nowrap;*/
}
I would suggest you to use elements like header, nav and div for layout along with flexbox instead of going for table to layout your header.
Please check following code. It shows basic mark up for header component with navigation and logo.
header {
width: 100vw;
height: 54px;
}
.header {
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 0 8px;
}
.logo {
flex: 1;
}
nav {
flex: 2;
display: flex;
justify-content: flex-end;
}
button {
padding: 8px 12px;
color: white;
border: none;
cursor: pointer;
}
.ghost {
color: black;
background: transparent;
}
<header>
<div class='header'>
<div class="logo">
<h2>Logo</h2>
</div>
<nav>
<button>Projects</button>
<button>Projects</button>
<button class='ghost'>Admin 😳</button>
<button>Profile</button>
</nav>
</div>
</header>
You need to add a class to your element and then add a css to your class:
display: flex;
justify-content: flex-start;
align-items: center;
There is object-fit: contain as a way to resize the image so that the entire image fits within the frame, aligning the long side of the image with the frame.
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
img {
width: 150px;
height: 100px;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
margin-top: 10px;
}
.contain {
object-fit: contain;
}
<div>
<h2>object-fit: contain</h2>
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain" />
<img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow" />
</div>
However, this does not work for div tags and so on, it works only for replacement elements.
h2 {
font-family: Courier New, monospace;
font-size: 1em;
margin: 1em 0 0.3em;
}
div {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
height: 940px;
}
.contain-parent {
width: 150px;
height: 100px;
background: red;
border: 1px solid #000;
}
.narrow {
width: 100px;
height: 150px;
background: green;
margin-top: 10px;
}
.contain1 {
width: 50px;
height: 80px;
background: blue;
object-fit: contain;
}
.contain2 {
width: 80px;
height: 50px;
background: blue;
object-fit: contain;
}
<div>
<h2>object-fit: contain(not work)</h2>
<div class="contain-parent">
<div class="contain1"></div>
</div>
<div class="contain-parent">
<div class="contain2 narrow"></div>
</div>
</div>
How can I reproduce the same behavior as object-fit: contain on replacement elements with div tags,
span tags and so on? I want to display letter box when the aspect ratio does not match.