As we need to define an image with amp-img tag for an amp page, the problem is with the responsive nature of those image.
For example:
<p align="center"><amp-img width="400px" height="200px" layout="responsive" src="https://xyx.com/abc.png"></p>
Now if the master div is 600px then, the image will get stretched out to 600px (more than its normal 100%), but for a mobile device with master div being 300px , the image will adjust the height and will be perfectly fine as it will get contained in the 300px div stretching it to 100% won't make effect.
Also, layout cannot be set to fixed because it will then stretch out of the mobile display.
What's the solution?
If you have dynamic width of the image and want to handle this situation than go to this link : https://ampbyexample.com/advanced/how_to_support_images_with_unknown_dimensions/ and read "Fixed-Height Layout with correct Aspect Ratios" section.
It will help you to implement amp-img when you do not know the image width and do not want the image to be get stretched.
You can do like this :
CSS
<style amp-custom>
.magic-img { max-width:400px; margin: 0 auto;}
</style>
HTML
<div class="magic-img">
<amp-img width="400" height="200" layout="responsive" src="https://xyx.com/abc.png"/>
</div>
Related
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.
How do I code my website so that my 100% width images adjust size according to different screen resolutions? For e.g. 1280 x 720.
Here is the link to my home page with the images that need resizing according to screen resolution. Look at Lines 119 to 123 for image codes.
You have put a height of 700px+ on your images using the img in css. Add another class in css saying:
.full-width-img{
width:100%;
height:auto;
display:block;
}
Add class="full-width-img" to your images you want to have 100% width.
EDIT
Remove the width qnd height from your img tags. BEcause right now they are:
<img src="images3/motoxmaxres.jpg" class="full-width-img" width="100%" height="" alt="motocross landing">
While it should be
<img src="images3/motoxmaxres.jpg" class="full-width-img" alt="motocross landing">
How can you stop image being resized by the browser? I want image to have certain width so I'm using <img src='src' style='width: certain_widthpx' />.
However when you resize the browser width, the scrollbar in the bottom appears which I don't want. How can I stop that?
You need to provide a simplified version of your DOM in the question. Assuming parent of img is body
Add this css rule to the parent.
body{
overflow-x: hidden;
}
You should specify image minimum width and height:
<img src="http://via.placeholder.com/800x800" style="min-width: 800px; min-height: 800px;" width="800" height="800" />
As you asked you want your image not to be resized by the browser, browsers resize contents within a window based on the view-port. Every time you'll try to resize your browser, view-port will change, so to maintain the user's viewing experience content gets resized. Now as you showed <img src='src' style='width: certain_widthpx' />, here you're trying to give your image a fixed width that means you're restricting the view-port to hold the image at this fixed width and hence at view-ports lesser than your image's width, horizontal scrollbars appear. If you really want your image to be of that fixed width then you should contain it within an another holder and give an overflow-x to be scroll/auto.
Like this:
<div style="overflow-x: auto;'>
<img src='src' style='width: certain_widthpx' />
</div>
OR there is one more way and that is CSS way
<div class="holder">
<img src='src' />
</div>
CSS:
.holder { overflow-x: auto; }
.holder img { width: certain_widthpx; }
In above solution your image will hold that fixed width but the holder will adjust itself as per the view-port and the point where your image's width will be greater than the view-port holder will start showing horizontal scrollbars, but the browser window will not.
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.