I am trying to make a card div with two images inside, an up arrow and a down arrow.
When in full screen the images look okay and are the full size but due to Bootstraps responsive design, when i reduce the page resolution using the developer console in chrome, the images get smaller and smaller until they cannot be seen on a small device, such as a mobile.
How can i limit how small the images will go?
Thanks.
<div class='col-11 col-xs-11 col-md-5 col-lg-5' style='background-color:#dfdfdf;border-radius:5px;margin-right:10px;margin-bottom:10px;'>
<div class='col-2 col-xs-2 col-md-2 col-lg-2'>
<h4 class='card-header' style='text-align:center;height:100%;'>
<img style='height:50%;'src='uparrow' onmouseover=this.src='differentuparrow' onmouseout=this.src='uparrow' border='0'/>
<br><br>
<img style='height:50%; src='downarrow' onmouseover=this.src='differentdownarrow' onmouseout=this.src='downarrow' border='0'/>
</h4>
</div>
<div class='col-8 col-xs-8 col-md-8 col-lg-8'>
<h4 class='card-header' style=''><u>Title</u></h4>
<div class='card-body' style=''>
<p class='card-title'>Description</p>
<p class='card-text' style='display: inline-block; bottom:0;'>Points: 0<br>Replies: 0</p>
</div>
</div>
<div class='col-2 col-xs-2 col-md-2 col-lg-2' style='float:right;'>
<i class='fa fa-pencil fa-5' aria-hidden='true'> Edit</i>
<br> <i class='fa fa-trash fa-5' aria-hidden='true'> Delete</i>
</div>
</div>
https://jsfiddle.net/5a87h3ky/
I had to remove the original sources for the images due to confidentiality
You can set the minimum size of the image using the min-width: px; attribute.
This will prevent the image from getting any smaller than the given size.
There are several ways of controlling the size of images with CSS or in HTML. To control your arrows you can use min-height and max-height and also set min-width and max-width.
For example take image_arrow_up.jpg, you can set it's size with:
<head>
<style>
div {
max-height: 600px;
min-height: 400px;
max-width: 400px;
min-width: 200px;
}
</style>
</head>
Another way would be to use percentages, although this is not as concrete as min and max:
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
</head>
<body>
Another option is to use CSS with the image-set function, or with scrset + sizes:
.img {
background-image: url(examples/images/image-384.jpg);
background-image:
-webkit-image-set(
url(examples/images/image-384.jpg) 1x,
url(examples/images/image-768.jpg) 2x,
);
background-image:
image-set(
url(examples/images/image-384.jpg) 1x,
url(examples/images/image-768.jpg) 2x,
);
}
It also helps to make sure the original image is sized appropriately. For example make the original arrow image sized for a "regular" desktop monitor rather than an oversized arrow that may shrink in unexpected ways. Or you can use an image management service, such as Cloudinary or 3Scale to create responsive quality images.
Related
i'm building an website and came across this problem: i have a image with 345x300.
In my div, she gets the widths of 82 x 118, staying like this:
I need the image to have 82 x 82 width, and when i set it gets flattern.
What can i do to fix this problem? Sorry for my bad english.
If needed, this is the website i'm working: https://2018.escambofotografico.com.br/ (the problem i'm talking its in the end of the page)
Thanks everyone!
You can also do this using the object-fit css property.
I made a little example for you on how it works.
$(function(){
$('.list-group button').click(function(e) {
e.preventDefault()
$that = $(this);
$that.parent().find('button').removeClass('active');
$that.addClass('active');
$("img").removeClass();
$("img").addClass($that.prop('id'));
});
})
img {
height: 182px;
width: 182px;
}
.fill {
object-fit: fill;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.none {
object-fit: none;
}
.scale-down {
object-fit: scale-down;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="col-6">
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action" id="fill">object-fit: fill;</button>
<button type="button" class="list-group-item list-group-item-action" id="cover">object-fit: cover;</button>
<button type="button" class="list-group-item list-group-item-action" id="contain">object-fit: contain;</button>
<button type="button" class="list-group-item list-group-item-action" id="none">object-fit: none;</button>
<button type="button" class="list-group-item list-group-item-action" id="scale-down">object-fit: scale-down;</button>
</div>
</div>
<div class="col-6">
<img src="http://coveractionspremium.com/images/SoftwareBoxCD-model6v2-coveractions1.jpg" alt="">
</div>
</div>
</div>
Here is a Codepen you can play around with:
https://codepen.io/gurgen/pen/jKmXXW
When you set the dimensions of an html image tag, those are the dimensions that will display. If you take a rectangular image and display it as a square, you're going to get some distortion. The solution is to either edit your images with some padding to make them the exact size (and shape) you want, or else display them at the same aspect ratio that the images start at.
Also, note that your image is much larger than you are displaying. If bandwith for you server or customers is a concern, you're better off to resize the image to the size you want to display. The lightroom image is approximately 42Kb, but you might be able to resize it at 82x82 and send a ~6Kb file instead. For a mobile or low bandwith customer, that savings multiplied by 12 images is 432Kb. Your server has to serve up those wasted bytes to every customer, which you may be paying for.
Looking at some of your other images, you're scaling them up. Modern browsers will try to scale images smoothly, but you'll always lose some display quality doing this. Your best bet is to size images at the exact dimensions you want to display when you can.
To avoid stretching images in a fixed size container, you can set the max-height and max-width on the image tag to 100%. Once the height or width fills the container, it won't stretch the image.
So, if you want your image in a 82x82px container, you can do this for each image:
<div class="thumbnail">
<img src="...">
</div>
With the following CSS:
.thumbnail {
height: 82px;
width: 82px;
}
.thumbnail > img {
max-height: 100%;
max-width: 100%;
}
As some of you guys may know allowing users to upload images can be a hassle and especially if you have to create some sort of list with them.
I have been looking all over the web and have been unable to find concrete answers to what you do in the case where you need to show a list of images of different shapes. Therefor i turn to you.
Say User 1 uploads the following image:
And User 2 uploads this image:
As you can see these two images are very different in both height and width.
Now lets say that you have 10 images of different sizes and wish to display them in a grid 4 by 4 (for this purpose i use ng-repeat to show a loop)
<div class="col-xs-4" ng-repeat="image in images">
<img alt="" ng-src="{{image}}">
</div>
if you do this, this will create a list that is uneven! and will look very "ugly" to say the least.
So my question is what do you do? Are there any tricks using CSS to make it fit any images of any size so that everything is aligned?
I hope my description of the problem was accurate enough for the sake of demonstration here is a fiddle that shows this issue as well.
In short how do i make sure they are all the same size without making one of the images look cramped and / or distorting the individual image?
fiddle
As mentioned in my comment, one option is to crop all the images to a suitable format, a square might be a good compromise. You can do this by wrapping your images in a container first, and positioning the image in relation to the container. Example:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.image-container {
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
padding: 20px;
}
.image-container img {
width: 100%;
height: auto;
position: absolute;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4">
<div class="image-container"><img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
</div>
</div>
Fiddle
You can also position the image in the container. For example if you wanted to center it you could add:
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
One solution is to provide the users with a cropper to your preferred ratio and allow them to select the part of the image to show.
An alternative is to use the images as background on a div with specific ratio and hope that it does not show irrelevant areas.
Here is a solution for the second case (with a - just for laughs - animation to show the whole of the image)
http://jsfiddle.net/mrccf3sv/
.image{
display:block;
background: url('') 50% 0% no-repeat;
background-size:cover;
border:1px solid #ccc;
animation:pan 10s linear infinite alternate;
}
.image:before{
content:'';
display:block;
padding-top:56.25%; /*ratio of 16:9*/
}
And see it responsive by using different bootstrap column count for each breakpoint.
http://jsfiddle.net/mrccf3sv/1
Scaling with CSS is incredibly bad practice. I mean, we all have to do it sometimes, but if you CAN scale server-side, better do that. Try PHP's imagick, if available.
I'm attempting to place images inside grid tiles in an Angular-Material based app I'm working on. My problem is that these images do not "fit" within their tiles. Below is an example. My image is large (2832x4256) and takes over the entire container rather than scaling to fit within its tile. How could I get images to scale to fit within their respective tiles in the grid?
<md-grid-list md-cols-gt-md="3" md-cols-md="2" md-cols-sm="1" md-gutter="12px" md-row-height="1:1">
<md-grid-tile class="green">
<img src="resources/images/food-beer.jpg" alt="beer">
<md-grid-tile-footer>
<h3>first tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="blue">
<md-grid-tile-footer>
<h3>second tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
<md-grid-tile class="purple">
<md-grid-tile-footer>
<h3>third tile</h3>
</md-grid-tile-footer>
</md-grid-tile>
</md-grid-list>
Below is the result. What I'm aiming for instead is for the image to occupy the same amount of space as each of the blue and purple tiles.
If you want them to occupy the entire rectangle, I believe using the "layout-fill" attribute will also achieve that.
<img src="resources/images/food-beer.jpg" alt="beer" layout-fill>
It's been a year and the syntax has changed dramatically, but the problem remains. Here's how I solved this issue in an Angular 5/Angular Material 5 project.
For 2 columns and pictures that were 4600px x 3400px, I did the following:
In my css:
.tile-image {
width:100%;
height: auto;
}
In my html template:
<mat-grid-list cols="2" rowHeight="6:4">
<mat-grid-tile>
<img class="tile-image" src="../demo/tilePic1.jpg">
</mat-grid-tile>
You could either do this with targeting the image in CSS or by setting it as a background image.
Here is the CSS method but the downside to this is as the aspect ratio is based on the images width, at some breakpoints the image may not fill the tiles height.
.green img {
max-width: 100%;
height: auto;
}
So going with a background image maybe a little better but this method isn't fully cross browser supported.
.green {
background-image: url('folder/your-image.png');
background-size: cover;
}
All the answers are nice. But you can also try
<img src="resources/images/food-beer.jpg" style="object-fit: cover; height: inherit; width: inherit;">
I am trying to vertical align an image within a bootstrap thumbnail. Thanks for any help!
<div class="pull-left" style="margin-right: 10px;">
<div class="thumbnail">
<div class="caption" style="background-color: #ccc;">
<a style="color: black;" href="/product/?id=#product.Id">#product.UPC12</a>
</div>
<div style="width: 150px; height: 150px; "> <!-- Center this -->
<a style="" href="#" onclick="showProduct('#product.Id')">
<img class="" src="~/Asset.ashx?id=1253&type=small" />
</a>
</div>
<div style="padding-left: 5px;" class="checkbox">
<label>
#Html.Partial("~/Views/Shared/_ProductImageCheckboxPartial.cshtml", new Logix3.TDC.Exchange.Web.Models.ProductImageModel() { Product = product, Image = defaultImage })
</label>
</div>
</div>
</div>
I assume you wanted to achieve something like this, using different-sized images?
I've looked and looked for a simple answer to this and nothing ever seemed to work well, so I managed to take a few bits and hack something together.
It's a little convoluted but it works really well for me, and also resizes and centers both landscape and portrait images. It also lets me set the dimension ratios I want the image to be (adjust the padding-top percentage in ".thumb:before").
Bootply Example at 1/1 ratio (square). (click on the image to see the original)
Bootply Example at slight portrait ratio (125%)
This needs two custom css classes.
The 'thumb' class is assigned to the div and the image url is set as a background.
Since it's poor form to embed a div inside an anchor tag, I also created a 'clickable' class, which takes the inside anchor tag, sizes it to the parent container, and floats it above the parent so that it mimics clicking the image.
HTML:
<div class="col-xs-1">
<div class="clickable thumb" style="background-image: url('http://auduno.github.io/clmtrackr/media/audrey.jpg')">
<a href="http://auduno.github.io/clmtrackr/media/audrey.jpg">
</a>
</div>
<div class="text-center"><small>Product 15</small></div>
</div>
CSS:
.thumb{
background-position: 50% 50%;
background-repeat: no-repeat;
background-size:cover;
position:relative;
width:100%;
border:1px solid #BBB;
}
.thumb:before {
content: "";
display: block;
padding-top: 100%;
}
.clickable > a{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none; /* Makes sure the link doesn't get underlined */
z-index:10; /* raises anchor tag above everything else in div */
/* For IE */
background-color:white; /*workaround to make clickable in IE */
opacity: 0; /*workaround to make clickable in IE */
filter: alpha(opacity=1); /*workaround to make clickable in IE */
//from http://blog.avtex.com/2012/01/27/how-to-make-an-entire-div-clickable-with-css/
}
Here's my code:
<div class="swd-layout-cell layout-item-2" style="width: 100%">
<p>
<img width="450" height="400" alt="" src="images/new.jpg" style="float: left;margin-right:20px" class="">
</p>
<h5>CloudMoV</h5>
<h6>Mobile users can import a live or on-demand video to watch from any video streaming site. </h6>
<h6>Invite your friends to watch the video concurrently. </h6>
<h6>Chat with your friends while enjoying the video.</h6>
<br>
</div>
The image appears on the left with the text on right of it. But on different sized monitors the text placement is varying.On one monitor the placement was correct and on another the text was appearing below the image.
How can I fix this?
This is being caused by width: 100%;.
HTML:
<div class="swd-layout-cell layout-item-2" style="width: 100%;">
So you have this as your container, it will strech 100% of the screen. In the demo mess around with the size of the window and you will see the text move around.
This is because when the window is lets say 500px, the image is taking up 400px. So your text is trying to get into 100px worth of space.
DEMO HERE
You can set a min-width that will stop the cotainer from getting to small so it will not squash the text.
HTML:
<div class="swd-layout-cell layout-item-2" style="width: 100%; min-width: 700px;">
So here you can see we set a min-width, this works fine as it will just stop the container from getting to small.
DEMO HERE
Another option is to use media tags. Now these are used to help design sites for all kind of resolutions.
CSS:
div {
width: 100px;
height: 100px;
}
#media screen and (min-width: 1080px) {
div {
background: blue;
}
}
#media screen and (min-width: 487px) and (max-width: 1079px) {
div {
background: green;
}
}
#media screen and (max-width: 487px) {
div {
background: red;
}
}
So this is a quick demo to show you what they do. It uses the different CSS based from the size of the screen. So using this with your code can allow you to customise the layout depending on the size of the screen.
DEMO HERE
<div class="swd-layout-cell layout-item-2" style="width: 100%;">
<p style="clear:both;">
<img alt="" src="images/new.jpg" style="float: left;margin-right:20px; width:50%; max-width:450px;" class="">
</p>
<h5>CloudMoV</h5>
<h6>Mobile users can import a live or on-demand video to watch from any video streaming site. </h6>
<h6>Invite your friends to watch the video concurrently. </h6>
<h6>Chat with your friends while enjoying the video.</h6>
<br>
</div>