I want to make a user card for the front-end im currently making and our/my approach for that was to resize the user image based on the width given, but we noticed especially on large screens the Image gets really big while the text remains small.
I created a small mock-up in adobe xd how I image it to look like :
User-Card Mockup
What is common approach to this?
The only way I could imagine is to make a media query every 100 or 200px and that would be annoying as you can imagine.
This can't be that annoying right?
We're using Angular with SCSS and also used a lot of Bootstrap 4 but kinda want to get away from bootstrap.
This is the HTMl of our component before I tried changing it :
<div class="mb-3" style="cursor: pointer;" (click)="openModal(user)">
<div class="row" >
<div class="col-lg-6 col-sm-6">
<img class="rounded" width="90%" style="object-fit: cover; overflow: hidden" [src]="user.avatar">
</div>
<div class="col-lg-6 col-sm-6 ml-n4 w-100">
<h3 [title]="user.name" class="text mb-0 border-bottom w-100 trunc">{{ user.name }}</h3>
<div>
<h4 class="text mb-0">{{ user.jobTitle }}</h4>
<h6 class="text mb-0">{{ user.hiredAt | date }}</h6>
<span class ="badge badge-primary">{{ user.department }}</span>
</div>
</div>
</div>
I hope this question isn't that stupid.
If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto
`
<img class="rounded responsive" width="90%" style="object-fit: cover; overflow: hidden" [src]="user.avatar">
</div>`
.responsive { width: 100%; height: auto; }
Related
The Problem
There is a space below the img in md screen size, and I try to get rid of it.
I've tried to add pa-0 in class, but still can't figure out how to achieve the result.
Restriction
Since the whole code will be received in frontend Nuxt2 in v-html to represent the description + image. So I couldn't add CSS as well. Only vanilla html+ Some Vuetify syntax.
Update
This is for Nuxt2 with Vuetify, using in v-html.
Update ver.2
Initially there is a css attribute in the section of v-html.
margin-bottom: 12px;
But the answer is a good format to code in vanilla html.
my code
<div class="py-6 pa-0">
<div class="row no-gutters align-center" style="background-color: #f6f6f6">
<div class="col-md-6 col-12 order-md-1 order-2 px-4 mb-1">
<h1 class="display-1 py-8">Main Property</h1>
<div class="align-center d-flex justify-space-between mb-1">
<h5>Water</h5>
<div class="mb-1"><small>And more</small></div>
</div>
</div>
<div class="col-md-6 col-12 order-md-2 order-1">
<img class="mx-auto" src="https://images.unsplash.com/photo-1668277280345-f3949c1b6aa2?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80" lazy-src="https://images.unsplash.com/photo-1674707735136-3d3a8720397e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80"
alt="test" />
</div>
</div>
</div>
Hey this sounds like an an issue with line height getting the best of things,
simply set the font-size of the image container to 0 and the bottom space should disappear.
div {
font-size: 0;
}
I'm doing a Django project and I'm using the blog example from Bootstrap 5
I'm trying to embed an image into the first div. So it goes from this:
To this:
It's photoshopped.
How can I do that?
This is the div I'm trying to edit:
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 text-white fst-italic">We are opening our 4th location in March 2023</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and
efficiently about what’s most interesting in this post’s contents.</p>
<p class="lead mb-0">Continue reading...</p>
</div>
</div>
The full example code can be downloaded from here.
Add a background property to the div:
<div style="background-image: URL('www.server.address/image.jpg');">
</div>
You will want the background property, you can attach a URL to it.
You may then want to Apply a filter to a background image
.headerObject {
height: 100px;
width: 300px;
background: url("https://cataas.com/cat");
background-size: cover;
}
<div class="headerObject">
Hello World
</div>
I am kind of new in web design and I am having issues to properly resize images with the class img-fluid in a certain view where they act as some kind of thumbnails inside a portfolio-item. I am going to upload a couple of images to explain what I am trying to achieve. The first image is what I am trying to do, around 3-4 items per row with the same size , the problem is that when I show one image that is vertically bigger than horizontally it also gets bigger resolution than the other images , messing my row entirely and adding some empty spaces
This second image ilustrates the problem, 2 is the image that is bigger in height and it messes the other elements depending on the position that image gets placed.
Here is the HTML code :
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6 mb-2">
<!-- Portfolio item -->
<div class="portfolio-item">
<a class="portfolio-link" href="someurl">
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src="sourceofimage" alt="default" height=auto/>
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading">some text</div>
<div class="portfolio-caption-subheading text-muted">some text</div>
</div>
</div>
</div>
</div>
</div>
And CSS of img-fluid
.img-fluid {
max-width: 100%;
height: auto;
}
Can anyone help me with this ?
Use both height and width. Set the width to how ever many pixels or any other increment you would like, and the same for the height.
The code: https://codepen.io/flvffywvffy/pen/OJjoeKP (ignore the javascript)
Following problem: I have some Bootstrap card elements with pictures, and some pictures have different sizes/ratios, like the one in the middle (see attached screenshot). Therefore my card elements are not in one row. That's not very nice.
Now I would like to resize these images to the height of the others, and crop the overflow. How do i do that? Heres my code snippet of one card...
<div id="cities">
<div class="city">
<div class="card">
<div class="city-img-container">
<img class="card-img-top city-img" src="..." alt="New York City">
</div>
<div class="card-body">
<h5 class="card-title"><b>Name: </b>New York City</h5>
<p class="card-text"><b>Land: </b>USA<br>
<b>Spitzname: </b>The Big Apple</p>
<div class="city-bottom-content">
<a href="#/city?id=35" class="btn btn-primary" data-id="35">
<i class="bi bi-arrow-right"></i>
</a>
<button data-id="35" class="is-favorite">
<i class="bi bi-heart-fill"></i>
</button>
</div>
</div>
</div>
<div class="city">
...
</div>
</div>
PS: The card elements inside of #cities are arranged with grid and grid-template-columns.
Thank uuu! :)
screenshot
You can make all of the images the same height (and width) by using object-fit.
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
In the example above, the height of all images will be 15% of the viewport width. This could be whatever you please...500px, 10vh, etc.
The object-fit: cover;, will likely hide parts of images - but perhaps you could implement a means of viewing them in full-size when clicked on? Either way, it's a nice approach to keep the cards fairly uniform.
Note that you are just making some adjustments to the existing Bootstrap class .card-img-top. You could include this CSS on your HTML file, in your CSS file, or update the class in your Bootstrap file if you downloaded it.
Give a fixed height to image tag so small images will automatically expand.
<img class="card-img-top city-img" height="200px" src="..." alt="New York City">
I want the text to look like this on my image:
which is slightly away from the "Center" point of the image(as i want to avoid the phone in the image), so text-center wouldnt work. I currently set the division of the row to "relative" and the text to "Absolute" in order to even get the text on top of the image. But when i resize the image, it will be displaced.
Code:
<section>
<div class="col-lg-12 text-center"style="margin: 0;padding: 0;position: relative;">
<img class="img-fluid" style="width:100%;" src="img/phone-transparent.png" alt=""></img>
<h2 style="color:red;position: absolute; top: 120px; width: 100%;">This is also</br>available on your mobile.</h2>
</div>
</section>
On original screensize:
On a different screensize:
This can be done using only Bootstrap 4 classes. Read the documentation on using the grid, and the utility classes for positioning and flexbox. You don't need all the inline CSS styles.
<div class="container-fluid">
<section class="row no-gutter align-items-center">
<div class="col-lg-12 text-center p-0 d-flex align-items-center">
<img class="img-fluid position-relative mx-auto" src="//placehold.it/1900x400" alt="">
<h3 class="w-100 position-absolute text-danger my-auto">This is also<br>available on your mobile.</h3>
</div>
</section>
</div>
Demo
Remember that .col-* must be placed in the .row, and the .row
should be inside a container.
You can use the spacing utils and CSS object-fit on the image to get the position and size: Demo 2 (you will need to tweak this as desired).