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>
Related
I want to put three images next together by using flexbox and responsive units in this case percentage(%). I have 2 issues: (1) justify-content does not work because I use % for flex items. (2) The tall of my images are getting bigger than the wide, in other word width and height of my images are not relative together because I used auto keyword for the height of images so I can have width and height relative. I would be very grateful if you could help me. I will include my code below.
.services h2 {
margin: 3.125rem 0 2rem;
}
#services-container {
display: flex;
width: 100%;
}
.service-item {
width: 90%;
height: 65%;
overflow: hidden;
}
.service-item img {
width: 100%;
height: auto;
display: block;
}
<section class="services">
<h2>our services</h2>
<div id="services-container">
<div class="service-item hotel">
<img src="./resources/pictures/hotel.jpg" alt="hotel">
<h4>The best hotels</h4>
</div>
<div class="service-item air-plane">
<img src="./resources/pictures/airplane.jpg" alt="airplane">
<h4>The best airline services</h4>
</div>
<div class="service-item food">
<img src="./resources/pictures/food.jpg" alt="food">
<h4>The highest quality foods</h4>
</div>
</div>
</section>
First, you can set the height to 100% and width to auto and use justify-content on parent like so :
.services h2 {
margin: 3.125rem 0 2rem;
}
#services-container {
display: flex;
width: 100%;
justify-content: space-between;
}
.service-item {
width: 30%;
height: 100%;
overflow: hidden;
}
.service-item img {
width: auto;
height: 100%;
display: block;
}
Hope it helps
I am building a full stack,server-side rendered react e commerce app. However since css is my weak point I tried to build product card instead of using library templates. however the issue is I could not figure out how to make img element cover the div. when I place height and width properties img disappears. it might be an easy question for many of you but i could not figure out :(
here is the react component code:
<div className="card-body ">
<div className="card-img-container">
<img src={imageUrl} alt={name} className="card-img" />
</div>
<div className="card-footer">
<span className="name">{name}</span>
<span>
<div className="price-and-dollar">
<span className="dollar-sign">$</span>
<span className="price"> {price}</span>
</div>
</span>
</div>
</div>
here is the css:
.collection-item {
background-color: $gray-700;
display: flex;
flex-direction: column;
width: 23vw;
.card-body {
width: 94%;
}
}
.card-img-container {
height: 100%;
width: 100%;
}
.card-img {
height: 100%;
width: 100%;
}
here is the result
.card-img-container {
height: 100% !important;
width: 100% !important;
}
.card-img {
height: 100% !important;
width: 100% !important;
}
Try this hope it will be helpful
you could try
.card-img-container {
height: 100%;
width: 100%;
}
div.card-img-container > img {
height: 100%;
width: 100%;
}
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 an image with a height larger than that of it's container. The image is set to max-height: 100% and max-width: 100% but it continues to grow beyond it's containing element (in height - surprisingly not in width)
How do I prevent it from expanding beyond it's container while keeping it's aspect ratio?
An example is available at http://codepen.io/navarr/pen/zxZjjP, and the code at that example:
The HTML:
.row {
display: flex;
.col {
display: block;
border: 1px solid blue;
width: 50px;
height: 400px;
flex-grow: 1;
display: flex;
flex-direction: column;
text-align: center;
.link {
flex: 1 1 auto;
img {
max-height: 100%;
max-width: 100%;
}
}
h3 {
flex: 0 0 auto;
background: green;
}
}
}
<div class="row">
<div class="col">
<div class="link">
<img src="http://i.imgur.com/qG6NmU7.png" />
</div>
<h3>100 x 800 image</h3>
</div>
<div class="col">
<div class="link">
<img src="http://i.imgur.com/EjltysP.png" />
</div>
<h3>800 x 100 image</h3>
</div>
<div class="col">
<div class="link">
<img src="http://i.imgur.com/zJlunbp.jpg" />
</div>
<h3>800 x 100 image</h3>
</div>
<div class="col"></div>
</div>
The first box illustrates the problem: the image expanding beyond it's containing element.
The second and third box show this not being a problem as long as the image is wider than it is tall.
Add height: 100%; to the parent of the image :
.link {
flex: 1 1 auto;
height: 100%;
img {
max-height: 100%;
max-width: 100%;
}
}
demo
Set width and height to .link in css.
Check edited codepen http://codepen.io/anon/pen/azJGrK
CSS
.link {
flex: 1 1 auto;
width: 100%;
height: 80%;
img {
max-height: 100%;
max-width: 100%;
}
Replace the img tag with a div and set the image as the background image, and add this to the styling:
Background-size:contain;
This will allow the image to maintain its aspect ratio but fill the entire space of the div as much as possible.
You can also try background-size:cover; and see which one fits your needs better.
Remember, you need to include the height and width of the div when using background images.
Using the same mentality as found in the answer here, you can try setting this on the image parent:
height: 0;
min-height: 100%;
And on the img itself, set:
height: 100%;
I am creating a website and need two images to overlay on top of each other, with the top image being centered, however I also need the entire block to be centered in the page so I don't think I can use absolute positioning as I need the page to be scale-able.
I am using -
img.center { display: block; margin-left: auto; margin-right: auto; }
To center images on the page.
Im not sure if I have explained this very well so hopefully the following mock-ups will help.
I have looked around into image overlaying but they all seem to use absolute positioning and I cant seem to make it work so that the images are always centered using that method.
Is there anyway to do this? if some some example code would be extremely helpful, or just a point in the right direction.
Thanks.
<div class="img_cont">
<img src="1.png" alt="" class="first"/>
<img src="2.png" alt="" class="second"/>
</div>
<style type="text/css">
div {
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
}
.first {
width: 100%;
height: 100%;
}
.second {
position: absolute;
}
</style>
<script type="text/javascript">
$(".home_click").css("left", ($(".img_cont").width() - $(".second").width()) / 2 + "px");
$(".home_click").css("top", ($(".img_cont").height() - $(".second").height()) / 2 + "px");
</script>
You can use negative offset technique.
<div class="img_cont">
<img src="1.png" alt="" class="first"/>
<img src="2.png" alt="" class="second"/>
</div>
<style>
.first, .second{
margin:0 0 0 -200px; /* where 400px is width offset is / 2) */
position:absolute;top:0;left:50%;
}
.second{
margin:0 0 0 -100px; /* let's guess second image was 200px wide */
}
</style>
<style type="text/css">
body {
margin: 0px;
}
.height-100vh {
height: 100vh;
}
.center-aligned {
display: box;
display: flex;
box-align: center;
align-items: center;
box-pack: center;
justify-content: center;
}
.background-image {
position: relative;
}
.text {
position: absolute;
}
</style>
<div class="height-100vh center-aligned">
<img class="background-image" src="http://i.imgur.com/1aBfM.png" />
<img src="http://i.imgur.com/DH3Qw.png" class="text">
</div>