I'm attempting to place images inside grid tiles in an Angular-Material based app I'm working on. My problem is that these images do not "fit" within their tiles. Below is an example. My image is large (2832x4256) and takes over the entire container rather than scaling to fit within its tile. How could I get images to scale to fit within their respective tiles in the grid?
<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row-height="1:1">
<md-grid-tile class="green">
<img src="resources/images/food-beer.jpg" alt="beer">
<md-grid-tile-footer>
<h3>first tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="blue">
<md-grid-tile-footer>
<h3>second tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="purple">
<md-grid-tile-footer>
<h3>third tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
Below is the result. What I'm aiming for instead is for the image to occupy the same amount of space as each of the blue and purple tiles.
If you want them to occupy the entire rectangle, I believe using the "layout-fill" attribute will also achieve that.
<img src="resources/images/food-beer.jpg" alt="beer" layout-fill>
It's been a year and the syntax has changed dramatically, but the problem remains. Here's how I solved this issue in an Angular 5/Angular Material 5 project.
For 2 columns and pictures that were 4600px x 3400px, I did the following:
In my css:
.tile-image {
width:100%;
height: auto;
}
In my html template:
<mat-grid-list cols="2" rowHeight="6:4">
<mat-grid-tile>
<img class="tile-image" src="../demo/tilePic1.jpg">
</mat-grid-tile>
You could either do this with targeting the image in CSS or by setting it as a background image.
Here is the CSS method but the downside to this is as the aspect ratio is based on the images width, at some breakpoints the image may not fill the tiles height.
.green img {
max-width: 100%;
height: auto;
}
So going with a background image maybe a little better but this method isn't fully cross browser supported.
.green {
background-image: url('folder/your-image.png');
background-size: cover;
}
All the answers are nice. But you can also try
<img src="resources/images/food-beer.jpg" style="object-fit: cover; height: inherit; width: inherit;">
Related
I'm trying to get my head round Bootstrap background images. Can anyone help on the right syntax for displaying a background image when the file is local. Specifically I've got two alternative lines in my page html
<body class ="bg-image" style="background-image:
url('https://mdbootstrap.com/img/Photos/Others/images/76.jpg');height:100vh;">
<body class ="bg-image" style="background-image:
url('/wwwroot/Images/gymEquipment.jpg');height:100vh;">
The first one works and the second local one doesn't. Any corrections greatly appreciated.
Thanks,
Nick
Full page background image
we can easily make this background image to cover the full available space and make it a full-page background image.
Just replace height: 400px; with height: 100vh;
vh stands for viewport height.
height: 100vh; means 100% of available height.
<!-- Background image -->
<div
class="bg-image"
style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/standard/city/041.webp');
height: 100vh;
"
></div>
<!-- Background image -->
Note: If you want to stretch the image to the full available height and width remember to use the image with enough high resolution. However, be careful not to overdo it. Heigh-resolution images weigh a lot and can slow down your website.
For More Information: https://mdbootstrap.com/docs/standard/content-styles/background-image/
In Email template design, we have to add sender logo, which is of three different shapes rectangular, square and vertical.
rectangular width around 102*18
square 43*40
vertical 18*43
The images gets loaded from backend at runtime.
The provided images for logos are High resolution. I tried to resize images and without fixed width fixed width/ height on img tag. It worked but the display quality is very poor as it lost some pixels while resizing.
I can not give fixed width i.e. 102px as other images(square and vertical) gets stretched.
<table><tr><td><img src="abc.net/{{logoid}}"></td></tr></table>
Welcome to SO!
In your case you need to set object-fit property in img so that
what ever its dimension is it can fit inside your layout that suits
best, object-fit: contain worked best in you scenario as you upload
logo so it need to be fully display.
NOTE: you need some specific height just for the layout it wont effect your image dimension
Here is an example
.cover {
object-fit: contain;
width: 150px;
height: 100px;
}
<figure class="original-image">
<img src="https://i.stack.imgur.com/2OrtT.jpg" width="242" height="363" />
</figure>
<figure class="cropped-image">
<img src="https://i.stack.imgur.com/2OrtT.jpg" width="242" height="363" class="cover" />
</figure>
There's a polyfill for IE: https://github.com/anselmh/object-fit
I have images that are dynamically pulled and cannot be certain of the image size or ratio of the image.
Using bootstrap4 (and wordpress) i'm trying to scale the image so that it fills the width and height of the div, and if possible maintain the aspect ratio (its ok if the image gets portions cutoff).
My image is currently breaking the height of the div and the image will size outside of the div.
.blog-home {
max-width: 570px;
max-height: 225px;
}
.blog-home img {
object-fit: cover;
max-height: 210px;
}
img {
max-width: 100%;
height: auto;
}
<div class="row article">
<div class="col-md-6 blog-home">
<picture width="778" height="312" class="attachment-large size-large wp-post-image">
<source type="image/webp" srcset="..." sizes="(max-width: 778px) 100vw, 778px">
<img src="..." sizes="(max-width: 778px) 100vw, 778px">
</picture>
</div>
<div class="col-md-6">
....
</div>
</div>
My tags are dynamically replaced with tags. I can't sort out how to fix this without breaking the responsive-ness of the layout.
Then I would suggest that you use background-size: cover. Here is the definition according to https://www.w3schools.com/cssref/css3_pr_background-size.asp.
Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges
Use Cover to resize the background image to cover the entire container.
Here is an example link:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover
The best solution would be to cut or crop the images somewhere in the wordpress, here is a good read on why and how it can be achieved. In case your images are already in the Media Library - use Regenerate Thumbnails plugin to fix all of them in one click.
I think there are a lot of styles involved in the case, so it won't be so easy to get which exact part of it breaks the output without inspecting the full source, however in the worst case you could add .blog-home {overflow:hidden} to cut all what goes outside the div.
I have an application that is querying the Spotify API which returns some names and images.
I am listing all of these out on my page inside cards/panels like so:
<div class="col-md-4" v-if="type == 'tracks'" v-for="(track, index) in tracks">
<div class="card">
<div class="header bg-red">
<h2 class="nameHeading">
#{{ track.name }} <small>#{{ track.artists[0].name }}</small>
</h2>
<p class="header-dropdown m-r--5">#{{ index + 1 }}</p>
</div>
<div class="body">
<i :style="{ 'background-image': `url(${track.album.images[1].url})` }" :alt="track.name" class="bg-image"></i>
</div>
</div>
</div>
The images returned can be of varying sizes and dimensions and so my bg-image class helps render these consistently on the page:
.bg-image {
background-size: cover;
display: block;
width: 100%;
height: 325px;
background-position: center;
}
This works perfectly on desktops:
However the cards/panels get stretched when viewing on smaller screens:
Is there a way I can prevent this from happening and just scale the image down to keep it consistent with what you see on the desktop and to keep the panel in roughly the same shape?
My CSS skills are really quite basic, and so I have no clue where to start when it comes to something like this.
can you try this
.bg-image {
width:100%;
float:left;
background:url('http://media02.hongkiat.com/ww-flower-wallpapers/dandelion.jpg');
height:600px;
background-size:100% auto;
}
Setting background-size: 100% was definitely a step in the right direction. The only issue was that it then meant the image repeated above and below to fill in the rest of the height set by the .bg-image class.
Setting background-repeat: no-repeat solved this, but still left the blank space above and below.
Using some jquery $('.bg-image').css('height', $('.bg-image').width()); I was able to resize the height of the <i> tag appropriately - the issue I ran in to was that because I am using Vue, the cards weren't visible in the DOM straight after my API request.
To allow v-for to render these and then run the jQuery, I simply added this into my Vue method:
this.$nextTick(function()
{
$('.bg-image').css('height', $('.bg-image').width());
});
This now resizes appropriately on desktop and mobile devices.
Implementing a "play video" function on a web site. Each video content item can have a different image. Each of these images will have the same width, but potentially differing heights (they are resized on upload to maintain aspect ratio to meet standard width requirements).
The plan was to display another transparent "play button" image over top of the content image using markup like this:
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<img src="PlayButton.png" alt="Click to Play" height="200" width="300" />
</a>
</div>
This is very similar to how channel 9 does it on their home page. This, however, appears to assume any image is of standard height and width. Are there alternative ways of tackling this?
Forgot to mention originally. We have a predefined width that things will fit into, however, each image may have a different height. For example, the same markup needs to be used to support the following images:
W x H
400 x 200
400 X 300
400 X 400
The Play button needs to be centered in each image.
Instead of the inner element being an <img>, you could make it a <div>, styled with the playbutton as the background image, positioned in the center.
<div class="media">
<a class="videoLink" href="#" style="background-image: url(http://cloud.github.com/downloads/malsup/cycle/beach2.jpg);" >
<div style='background:url(PlayButton.png) center center;' alt="Click to Play" height="200" width="300" />
</a>
</div>
You'll still need to know the size of the thumbnail image, as you'll still need to supply height and width for the div - since you're displaying the thumbnail as a background image, you won't be able to have the box scale to the right size automatically. But at least now your code can set the values for height and width without worrying about the shape of the play button getting distorted.
(note: the play button as a background image should probably be in a separate stylesheet rather than being declared inline as per my example; I did it like that to demonstrate how it differs from your original code, rather than to show best practice)
Need some your CSS to make sure things work, but this may help you:
.media {
display: table;
}
.media img {
display: table-cell;
vertical-align: middle;
display: block;
margin: 0 auto;
}
If not, please add you CSS so I can Fiddle it and make it happen.
I'd do it like this.
<div class="media">
<a class="videoLink" href="#"></a>
<img class="thumbnail" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/>
</div>
Separate the thumbnail image from the link. We want the link to appear on top of the image, and the image to stretch the height of the <div class="media">.
The CSS:
.media {
position: relative;
}
.videoLink {
display: block;
height: 100%;
width: 100%;
background-image: url(PlayButton.png);
background-position: center center;
position: absolute;
z-index: 2;
}