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;
}
Related
Trying to get a CSS only solution for the following problem.
I would like to display a variety of sized images within a container. If the image is larger then 80% viewport height, it should be scaled down to fit within the container.
Problem I am having is scaling to both a max-height and max-width (in order to accommodate both landscape and portrait images).
Here is a non-working JSFiddle as a starting point. None of the images should flow outside of the gray box.
https://jsfiddle.net/0h5zkk0z/2/
<div id="container">
<img src="http://dummyimage.com/200x200/000/fff/?text=small" />
</div>
<div id="container">
<img src="http://dummyimage.com/400x700/000/fff/?text=portrait" />
</div>
<div id="container">
<img src="http://dummyimage.com/600x400/000/fff/?text=landscape" />
</div>
<style>
#container {
max-height: 80vh;
background-color: #ccc;
position: relative;
margin-bottom: 30px;
}
#container IMG {
margin: 0 auto;
display: block;
width: auto;
height: 100%;
}
</style>
.container {
max-height: 80vh;
background-color: #ccc;
position: relative;
margin-bottom: 30px;
}
.container img {
margin: 0 auto;
display: block;
width: auto;
max-height: inherit; //Inherits from container height
}
Btw: Please use an ID only once :-)
Fiddle
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 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.
I have two images of different width and height that need to be positioned bottom centered within the image box. Here is the HTML and CSS example.
<div class="box">
<div class='image'>
<img alt="" src="image.jpg"/>
</div>
</div>
.box {
max-width: 970px;
height: 440px;
}
.box img {
max-width: 100%;
position: absolute;
bottom: 8px;
margin-left: auto;
margin-right: auto;
}
This code works fine for a large image of exact width and height. But when a smaller image is placed within image box, that image is centered bottom right. How can I make both images center bottom?
Thanks for anyone's help!
Here you go... I'll try to explain as we go, but short answer, a fiddle
.box {
/* Just so I could see the parent */
background-color: #bada55;
max-width: 970px;
height: 440px;
/* Needed to make this element positional (so it will contain the absolutely positioned child */
position: relative;
/* Yep, center wasn't necessary here... */
}
.box .image { /* move this to the image wrapper */
position: absolute;
bottom: 8px;
/* Force full width */
left: 0;
right: 0;
/* Center contents (the image) */
text-align: center;
}
img {
max-width: 100%;
}
I found this semantic trick to work pretty well (without any absolute positions)
.box {
margin: 0;
text-align: center;
max-width: 970px;
height: 440px;
border:2px solid red;
}
.box .something-semantic {
display: table;
width: 100%;
height: 100%;
}
.box .something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: bottom;
}
html
<div class="box">
<div class="something-semantic">
<div class="something-else-semantic">
<img src="" width="50" height="40"/>
<img src="" width="120" height="70"/>
</div>
</div>
</div>
fiddle here.
I am testing this problem in the latest version of Safari for Windows 7.
The problem is that this code works in all other browsers BUT safari:
<style type="text/css">
.userImg { height: 100%; width: 100%; }
.imgContainer { height: auto; width: 150px; }
</style>
<div class="imgContainer">
<img id="img" class="userImg" src="TemplateFiles/Hydrangeas.jpg" alt="" />
</div>
Does anyone know of a trick to get this to size the image proportionally in Safari using just CSS?
Thanks!
For those who needs to use height auto and parent of image is set to display: flex, this trick will help.
image { align-self: flex-start; }
If your parent of image has set flex-direction: column, you need to do this instead.
image { justify-self: flex-start; }
Just set only the width on the image. The browser will scale the image proportionally automatically.
.userImg { width: 100%; }
.imgContainer { height: auto; width: 150px; }
For those who needs to use height auto you an also try with this :
.userImg{
object-fit: contain;
}
.userImg { width: 100%; height: auto; }
.imgContainer { width: 150px; }
2019 year.
check maybe the parent element
.imgContainer { display: flex; align-items: stretch}
Try this:
Parent has display:flex
Child has align-self:center
#import url('https://fonts.googleapis.com/css?family=Slabo+27px');
body {
font-family: "Slabo 27px", serif;
}
h2 {
text-align: center;
}
[data-flex] {
display: flex;
width: 80%;
max-width: 800px;
font-size: 1.2rem;
margin: 0 auto;
line-height: 1.5;
}
[data-flex] > img {
margin-right: 2rem;
width: 30%;
}
[data-center] {
align-items: center;
}
[data-flex] div, [data-flex] p {
flex: 1;
}
[data-flex] div {
margin-right: 2rem;
}
[data-flex] div img {
width: 100%;
}
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<h2>By default, images that are flex-children will be their <em>natural</em> height, regardless of their width:</h2>
<div data-flex>
<img src="sophie.jpg" alt>
</div>
<h2>This can be avoided by <em>not</em> specifying a width for the image, but that makes it non-responsive:</h2>
<div data-flex>
<img src="sophie.jpg" alt style="width: auto">
</div>
<h2>Solution 1: apply <code>align-self: center</code> to the image</h2>
<div data-flex>
<img src="sophie.jpg" alt style="align-self: center">
</div>
<h2>Solution 2: apply <code>align-items: center</code> to the flex container</h2>
<div data-flex data-center>
<img src="sophie.jpg" alt>
</div>
<h2>Solution 3: Place the image inside another container, and make <em>that</em> the flex-child</h2>
<div data-flex data-center>
<div>
<img src="sophie.jpg" alt>
</div>
</div>