Can someone tell how to get a responsive image with AMP with a height max limit instead of a fixed height?
Thank you.
At this stage I found this:
HTML
<div class="fixed-height-container">
<amp-img data-hero class="contain" width="225px" height="150px" layout="fill" src="/myimage.jpg"></amp-img>
</div>
CSS
.fixed-height-container {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 380px;
}
amp-img.contain img {
object-fit: cover;
max-height: 200px;
}
Related
how to add the black bars on my div with 400x400 div size.
if the picture is portrait, it would add black bars on left and right,
and when the picture is widescreen the black bars will be added on top and bottom.
<div>
<img src="image.png" class="img-responsive" />
</div>
I have no sleep for almost 2 days because of this.
I don't understand on this.
this is the sample picture:
please help me
EDIT1:
hello, can you check my html... it should be perfect align, but the picture have different size the alignment broken... look at this.. http://codepen.io/anon/pen/MaorKq
EDIT2
It's already but when the width higher the image pass through
check here: http://codepen.io/anon/pen/EVXMee
Is this what you're looking for?
I've made a pure CSS solution that should work up to IE8. :)
Also, it should work with any width/height.
.image-background {
background: #000;
display: table;
width: 100%;
height: 100%;
position: relative;
}
.image-container {
display: table-cell;
vertical-align: middle;
text-align: center;
margin: auto;
max-height: 100%;
max-width: 100%;
}
img {
display: block;
max-height: 100%;
max-width: 100%;
margin: auto;
}
http://codepen.io/anon/pen/vNZJwe
Good luck!
Your div is 400*400, but your image is small, When you have used img-responsive that means img max-size : 100 %. But here you want to see min-size:100%.
You can try below code
<img src="image.png" class="img-responsive full-width" /> <!--add class full-width-->
in your css file
.full-width{
width:100%;
}
Use below CSS,JS and HTML markup to achive this:
<style>
.img-container {
width: 400px;
height: 400px;
background-color: black;
position:relative;
}
.img-container img {
position:absolute;
top: 50%;
left: 50%;
}
</style>
<script>
$(document).ready(function() {
debugger;
var img = $('.img-container img');
img.css('margin-top', - ($('.img-container img').height() / 2) + 'px');
img.css('margin-left', - ($('.img-container img').width() / 2) + 'px');
});
</script>
<div class="img-container">
<img src="http://www.gstatic.com/webp/gallery/1.jpg" class="img-responsive" />
</div>
Here is a stripped-down version of what #Himechi90 wrote.
If you only need one image instead of a row, basically all you need is:
.image-full-view {
float: none;
padding: 0;
background: #000;
display: table;
width: 100%;
height: 100%;
}
.image-full-view img {
display: block;
max-height: 80vh;
max-width: 100%;
margin: auto;
}
<div class="image-full-view">
<img src="https://media.usfcvast.org/images/cvast-arches/projects/la_mancha/la_motilla_del_azuer/la_motilla_del_azuer_aerial.jpg" alt="" />
</div>
You can use object-fit: contain;
css:
.image-container {
overflow: hidden;
height: 16rem;
background-color: black;
width: auto;
}
.image-item {
object-fit: contain;
height: 100%;
width: 100%;
}
html:
<div class="image-container">
<img class="image-item" src="images/Screenshot(1).jpg">
</div>
I'm trying to set an img width to 100% of it's container, the container changes size based on screen width, when the image is lower than its original size, i want to set the img width to 100%, however when the image-container is larger than the original width of the image, I want th position the image centrally inside of the container.
Any ideas?
.server-listing {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.server-listing .image {
text-align: center;
}
.server-listing .image img {
width: 100%;
height: auto;
}
My current CSS, pretty basic really, I need direction - thanks guys!
<?php foreach($this->model->data['servers'] as $server) { ?>
<div class="server-listing">
<div class="image">
<img src="x.jpeg">
</div>
</div>
<?php } ?>
My phtml page
(NOTE: The image can be literally any size)
max-width is the CSS property you should be using!
.server-listing {
width: 100%;
height: auto;
margin-bottom: 10px;
background-color: lime;
}
.server-listing .image {
text-align: center;
}
.server-listing .image img {
max-width: 100%;
height: auto;
}
<div class="server-listing">
<div class="image">
<img src="http://placehold.it/500" />
</div>
</div>
You probably have to enter fullscreen mode to really play with this!
Please try max-width:100%; instead of width.
The max-width property is used to set the maximum width of an element.
This prevents the value of the width property from becoming larger than max-width.
See how it works for both small and large images:
.server-listing {
display: inline-block;
max-width: 100vw;
height: auto;
}
.server-listing .image {
text-align: center;
margin-bottom: 10px;
background-color: gray;
}
.server-listing .image img {
max-width: 95vw;
height: auto;
}
<div class='server-listing'>
<div class='image'>
<img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/c0.0.50.50/p50x50/10342461_799073063461766_6339462327156793350_n.jpg?oh=169a0d52644a444c2f723b1d1ec6c64b&oe=558BEB09&__gda__=1435700277_205a1d24a106c52496fe0e3eb20470e6' />
</div>
<div>
<div class='server-listing'>
<div class='image'>
<img src='http://www.zastavki.com/pictures/1680x1050/2010/Animals_Cats_Cat_023761_.jpg' />
</div>
</div>
I think you have to add margin and display:
.server-listing .image img
{
width: 100%;
height: auto;
margin: 0px auto;
display: block;
}
I have few thumbnail image of users and their image can be portrait or wide.
I wish the thumbnails to be in a circle without lose the aspect ratio of it.
So I created a container for each image like that:
<div class='container'>
<img src='' ... />
</div>
With this css:
.container {
border-radius: 50%;
overflow: hidden;
position: relative;
width: 50px;
height: 50px;
img {
width: inherit;
}
}
it works fine with portrait images because the image width inherit from the container.
The problem now is to adapt the same to wide images... I should replace the width with height in order to let in work as expected.
There is a better solution of mine?
Or there is a way with Less to achieve at this?
You should leave the width/height unset and set the max-width/max-height to 100%.
img {
max-width: 100%;
max-height: 100%;
}
This will only downscale images though, not upscale.
width: fit-content; height: fit-content;
.container{
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
}
.container > img{
object-fit: cover;
width: 100%;
height: 100%;
}
<div class='container'>
<img src='http://searchengineland.com/figz/wp-content/seloads/2015/12/duckduckgo-logo-wordmark4-1920.png' alt='duck power'>
</div>
I have the following HTML:
<article class="post clearfix">
<div class="post-img">
<img src="path/to/img"/>
</div>
<div class="post-details">
[content]
</div>
</article>
And the following CSS:
img {
max-width: 100%;
height: auto;
}
.post-img {
float: left;
width: 33.33%;
margin-right: 1.5em;
overflow: hidden;
}
I want the div.post-img to be 100% as tall as its parent article, and for the img inside it to be 100% tall as well. (It's OK if some of the image is clipped off from the left or right sides.)
The height of the article is unknown, so I can't hard code it.
Thanks in advance!
you can use this class:
.full-height{
height:100vh; /* 100% vertical view port height */
}
for example;
<img class="full-height" alt="" src="test.png" />
this best way for displaying a full height image.
Here is an option to do that http://jsfiddle.net/237u55q1/1/
.post{
display: table;
width: 100%;
table-layout: fixed;
overflow: hidden;
}
.post-img {
display: table-cell;
width: 33.33%;
margin-right: 1.5em;
overflow: hidden;
vertical-align: top;
position: relative;
}
.post-img img{
width: 100%;
height: auto;
position: absolute;
}
.post-details{
display: table-cell;
vertical-align: top;
width: 66.66%;
}
Add or remove content to see the image adopting to the height :)
Use background-image to set an image and background-size: 100% auto to the background image size.
Safari for Windows is not calculating img height correctly within absolutely positioned div. The styling works fine on Chrome and Firefox.
http://jsfiddle.net/Wh2Tr/
HTML:
<div class="image">
<div class="image-inner">
<img src="http://lorempixel.com/400/200" />
</div>
</div>
CSS:
.image {
position: relative;
max-width: 100%;
height: 0;
padding-bottom: 75%;
}
.image-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.image img {
width: auto;
max-height: 100%;
margin: 0 auto;
display: block;
}
Caveats:
This is a simplification of the HTML. There are multiple images of varying sizes which need to have the same height (so using width:100%;height:auto; won't work)
This needs to be adaptive/responsive, so I can't set an explicit width or height to the image or container.
Same problem, I've used jquery. I couldn't find any solution till now:
$('.image-inner').css('height','100%').height($('.image-inner').height());
On the class image put height to auto. That should fix it. http://jsfiddle.net/Wh2Tr/1/
.image {
position: relative;
max-width: 100%;
height: auto;
padding-bottom: 75%;
}