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;
}
Everyone on the internet talks about mansorny where height is free and width is same.
I need to create mansonry where height is constant and width is not restricted.
I am aiming for this kind of layout that can be found on Microsoft Photos webapp.
Whats my best option to achive this kind of layout, can I do this with css purely, perhaps css grid? Has anyone created anything like this and has some examples or tutorials to look at?
<style>
.container{
width: 100%;
height: auto;
margin: auto;
padding: 0px;
position: relative;
overflow: hidden;
}
.container div{
height: 100px /*the Height you want*/;
position: relative;
float: left /*You can use display:inline-block*/;
overflow: hidden;
padding: 0px;
}
.container div img{
height: 100%;
position: relative;
}
</style>
<div class="container">
<div>
<img src="" alt="">
</div>
</div>
Basically, something simple like:
<div class="container">
<img src="something.jpg" class="image">
<div class="well">Title</div>
</div>
If the img can be max-height of like 400px for example (I think pinterest makes them fit really well), how do you make it not horribly compress itself?
.image {
width: 100%;
max-height: 300px;
height: 100%;
}
I think you should be set only width or height to "100%" and another one set "auto" it will be keep image proportion.
HTML :
<div class="container">
<img src="xxx.jpg" class="image">
</div>
<div class="well">Title</div>
CSS :
.container {
height:400px;
width:100%;
overflow: hidden;
text-align: center;
}
.image {
width: auto;
height: 100%;
}
another way you can use background-image property it easy for control background-size.
HTML :
<div class="container"></div>
<div class="well">Title</div>
CSS :
.container {
height:400px;
width:100%;
background-image: url("xxx.jpg");
background-size: cover;
background-position: center;
}
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>
For some reason when I add a width and height to .left-section, .section-page-layout-container doesn't expand and show the background, but if I add a height to .section-page-layout-container the background gradient repeats perfectly and every pixel is filled.
I tried messing around with the code but nothing seemed to work. Must be another stupid mistake.
Hopfully you good folks can help me out :)
Thanks in Advance!
My HTML
<section class="section-page-layout-container">
<div class="section-page-layout">
<div class="left-section">
<header>
</header>
</div>
<div class="right-module-section">
</div>
</div>
</section>
<div class="clear"></div>
My CSS
.section-page-layout-container {
background:#984B09;
background: url('../img/section-page-oj_gradient-background.png') repeat-y;
background-size:contain;
width: 100%;
}
.section-page-layout {
width: 1280px;
position: relative;
margin: 0 auto;
height: auto;
}
.left-section {
width: 585px;
height: 500px;
background: #000000;
float: left;
}
Use overflow: hidden
.section-page-layout-container {
background:#984B09;
background: url('../img/section-page-oj_gradient-background.png') repeat-y;
background-size:contain;
width: 100%;
overflow: hidden;
}
When you have floated object inside an object the container collaps, thats why u need a clearfix