I am using materialize css for placing images inside cards
But the images seem to get cut at half
<div class="card teal lighten-3 large hoverable">
<div class="card-image">
<img id="axolotl-api-picture" style="background-size: 100% 100%;" alt="cute axolotl">
</div>
<div class="card-action teal">
<a class="prev axolotl-api-picture">Previous</a>
<a class="next axolotl-api-picture">Next</a>
</div>
</div>
The current image:
img
The orginal image(i.e. what I want):
img
So you see the image is not completely showing
Try this:
style="background-size: cover;"
Also I think you need to change the height of this div <div class="card-image">.The image is taking up the whole space available to it.
Related
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 have two images with two different size. I am using bootstrap in my project. But I cant place the images together which looks like both have same dimension. I have gone through similar questions and tried a lot. Please help me to sort this out.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="http://placehold.it/2048x1536" target="_blank">
<img src="http://placehold.it/2048x1536" alt="Nature">
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="http://placehold.it/1280x720" target="_blank">
<img src="http://placehold.it/1280x720" alt="Nature">
</a>
</div>
</div>
my css is
.thumbnail img {
height:250px;
width:100%;
}
You can do it by putting the picture as background-image for the 'div' tag and setting value of 'background-position' as 'stretch'.
Said that, if the images are of different resolution and you fit them into the same-size container it might look pixelated at times.
I am using the bootstrap framework, I am looking to have 3 images as shown in the jsfiddle link below act in a responsive manor when the window size changes/monitor size is too small to display the full sized images. It is important the images remain on the same line (if possible) with no spacing in between.
<img src="http://via.placeholder.com/660x160.png"><img src="http://via.placeholder.com/350x160.png"><img src="http://via.placeholder.com/350x160.png">
Thanks
https://jsfiddle.net/mztyoy7q/
Add a class to the image tags, and don't forget to add the bootstrap!
Just make sure you link the bootstrap, and you can use this free CDN:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
and add the class
class="img-responsive"
to your img tags.
JSFiddle
EDIT: If you want the images on the same line, just create a couple divs.
first, create a parent div,
<div style="display:inline-block; width:100%; height:auto; background-color:#ff0000;">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
This div element will be red with 100% width, and automatically resizing height.
Then add divs between every image with the style float:left; like so:
<div style="display:inline-block; width:100%; height:auto;background-color:#ff0000;">
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
</div>
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
<div style="float:left;">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
</div>
Here is the updated JSFiddle If this works, please let me know!
Wrap your images to some grid/columns (e.g. .col-*) and make these images to fill 100% of available space (.img-responsive). This is a clean and elegant way to do it, using just bootstrap:
<div class="row">
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/660x160.png">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
<div class="col-xs-4">
<img class="img-responsive" src="http://via.placeholder.com/350x160.png">
</div>
</div>
https://jsfiddle.net/tvv89L1j/1/
About removing spaces, the easiest way would be just add your own styles to overwrite padding that bootstrap adds. You need to set padding-left and padding-right to 0 for columns (you can see where that padding comes from in browser inspector, of course).
I have the following going on:
<div class="row">
<div class="col-md-4 content-column">
<img class="btn-center btn-desktop" src="images/buttons/btn-desktop.svg" alt="desktop button">
<h2 class="btn-desktop-headline">Desktop Applikationen</h2>
</div>
<div class="col-md-4 content-column">
<img class="btn-center btn-webdesign" src="images/buttons/btn-webdesign.svg" alt="webdesign button">
<h2 class="btn-webdesign-headline">Webdesign</h2>
</div>
<div class="col-md-4 content-column">
<img class="btn-center btn-ios" src="images/buttons/btn-ios.svg" alt="ios Logo button">
<h2 class="btn-ios-headline">iOS</h2>
</div>
</div>
Now depending on the image size, the headlines move further down or not. How could I fix this?
Best way to deal with this is that placing divs with full width and css specified heights. And while you get images from server side you should bind them in style attribute.
Advantage of doing this is that you can stretch images without messing aspect ratio and position it to center of div.