Fill a div with an image (object-fit question) - html

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.

Related

How to incorporate different sized logo images into image tag at runtime

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

How can I ensure that my images look clear on my website

I'm currently working on my portfolio and I'm at the stage of adding images from my computer. However, when I upload an image it only looks clear if I don't change the width/height in my html. Whereas when I do change the width/height it becomes stretched and unclear.
This is an example of the image that has had its width/height changed -
Here is the image when I dont change the width/height -
The current image i'm using is a jpeg and the dimensions are 1920 × 1044
I'm resizing the image using this method -
<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;height:300px;" />
Take a look at my codepen to see more. I'm using placeholder images here for the time being. Ideally I would like my own photos to be as clear as the photos on my codepen. -http://codepen.io/jordan_miguel/pen/gLwJRb?editors=1100
Your resizing is not proportionate. If you do something like style="width:50%;", the the image will display proportionally but at the specified size percentage.
You need to resize it and also keep the aspect ratio of the original image to avoid stretching it.
For example:
<img class="fade aspect" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image" />
CSS:
.aspect{
height: 300px; //However tall you want it to be
width: auto; //Don't specify the pixels
}
This will also work:
.aspect{
height: 300px; //However tall you want it to be
width: 100%; //Don't specify the pixels
}
<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="width:250px;" />
auto correct height to the width
`<img class="fade" src="http://lorempixel.com/400/400/sports/1/" alt="Sports Image"style="height:300px;" />`
auto correct width to the height

Image Set Width Height Attributes in HTML, Set Width 100% in CSS

I have an image whose size I know.
<img class="example" src="img.jpg" width="1024" height="768" />
I want to have the width and height attributes set so it can layout where the image will be before it's downloaded. The image may take a second or two to come in, so when it does, I don't want the page to suddenly jump.
However, I also want the image to have width: 100%. Is there a way to achieve this using CSS?
I tried
.example {
width: 100%;
height: auto;
}
However, this ignores the aspect ratio I specified in the HTML. Is there a way I can use the width and height attributes defined in the HTML to keep the aspect ratio, but have the image to have width: 100% (i.e. the width of the parent)?
I don't want to use JS to achieve this, I don't want to hard code the proportions in CSS, and I'd rather not do any margin/padding hacks to achieve this.
Edit
Really, I'm just seeing if there's a better way of doing it than this,
https://jsfiddle.net/s6gkonbh/
[Update: updated link to fix broken external image url]
JSFiddle Demo
<div style="width:356px; height:452px; background-color:yellow">
<img class="example" src="https://live.staticflickr.com/1427/1370476027_aaf0621679.jpg" width="100%" />
</div>
just provide the width and height to the parent container division which will occupy the space of the image's dimensions while the image will load.
and set the width of the image to 100% and it will take height according to aspect ratio. Just set the background color of your parent div to white or something to blend with the background.
JSFiddle Demo
HTML:
<div style="width:500px; height:300px; background-color:yellow">
<img class="example" src="http://www.finnchat.com/app/uploads/2015/10/Blogi44_metakuva.jpg" width="100%" />
</div>
NB: image copyrights are with their respective owners.
Hi please try this remove the height and width from img tag
<img class="example" src="img.jpg" />
and css
.example {
width: 100% !important;
height: 100% !important;
}
The only way is by using javascript. Just set width 100% in css, then with javascript get the imatge width an multiply by the aspect ratio to get the desired height.

Scale images in Angular Material grid

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;">

HTML/CSS image overlay

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;
}