I wrote a Django application, where different (random) online images are put in :
<img src={{j.5}} width="150" height="150" border="0">
It works fine for most of the images, but some of them, which have high dimensions, do not show on my page. I tried with CSS:
img {max-width: 100%;max-height: 100%;}
But is not functioning. Since the pictures are selcted randomly, I want to make image to scale downwards. For example this image won't resize:
http://www.civitas.al/wp-content/uploads/2013/11/atentati-2111.jpg
Any idea?
Technically (you did not provide pictures), using consistent width and max-width both as CSS styles will remove possible conflicts between the DOM's idea of tag width and element width. This means
<img src={{j.5}} />
And
img {width: 150px; height: 150px; max-width: 100%; max-height: 100%; border: 0;}
are working for me.
Related
I'm trying to get an image of a player from the premier league's resources, then display that on a web page.
The images can be found using the link https://resources.premierleague.com/premierleague/photos/players/110x140/p178186.png. The 178186 is a code unique to a player and I can change that using jinja and the premier league api. So, I get the image on my page, but I can't change its width, only its height. I have tried declaring it when making the image in HTML:
<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p{{code}}.png" width="220">
I have also tried creating a class and then using css change the width:
<div class="playerimage">
<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p{{code}}.png" height="280">
</div>
.playerimage {
max-width: 220px;
min-width: 219px;
width: 220px;
height: 280px;
}
Website showing the image appears, with the height altered to 280px, but no change in width
Select the img tag with css instead of the div with .playerimage, so this worked for me:
HTML
<div class="playerimage">
<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p178186.png" height="280">
</div>
CSS
.playerimage img {
height: 280px;
width: 10px;
}
Im pretty sure the problem is the width="220" attribute in the <img>-tag. If you remove this you should be fine and can change the height, width however you want and need to.
try this instead:
<img src="https://resources.premierleague.com/premierleague/photos/players/110x140/p{{code}}.png">
I need help with some code, I am trying to make an image basically zoom in within 240px by 240px div, I don't know how exactly how to explain it, but basically the image needs to be zoomed in on and only in a certain square area.
the first one here is fine, doesn't need anything changed, but the second one doesn't fit within the whole square because it is too small.
<!-- 2 --><a class="wsb-media-carousel-wrapper img_rounded_corners" rel="wsb-media-carousel-desktop" href="productimg/bowk-inside.jfif" data-fancybox-type="image" style="height: 240px; width: 240px; margin: 20px; display: inline-block; vertical-align: middle;"><img src="productimg/bowl-inside.jfif" style="width: 240px; top: -39.2138px;"></a>
here is how it looks: i want the second one to look like the second one without actually resizing the image out of the code. i got this code from another website but cannot figure out how they made it fit.
my website: my website
their website: their website
The style attribute object-fit specifies how elements such as images should be placed inside of it's container. You can learn about it at https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
I have created a basic example of object-fit set to cover on a series of images to create the effect you are looking for.
img {
width: 240px;
height: 240px;
object-fit: cover;
border-radius: 20px;
}
img.orig {
object-fit: initial;
height: auto;
}
<p>Original Images</p>
<img class='orig' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/hub-default.jpg" alt="">
<img class='orig' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/background1.jpg" alt="">
<hr>
<p>Object-fit images</p>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/hub-default.jpg" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/221014/background1.jpg" alt="">
I am creating a mobile e-mail template (means no javascript) which has to be responsive.
I want to place several images inline, which are scaled down as the screen gets narrower. I did this by using css table and table-cell, and let the image scale. No problem so far.
However, since images are often blocked by e-mail clients, I was requested to create a kind of placeholder in grey, showing the image "alt text" when the image is not loaded. I want this placeholder to be of the same size as the contained image, and to scale at narrower widths too.
I got quite far, as you can see in the following fiddle: http://jsfiddle.net/ow7c5uLh/29/
HTML:
<div class="table">
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
<div class="table-cell">
<div class="placeholder">
<img src="http://lorempixum.com/120/60/" alt="alt text" width="120" height="60" />
</div>
</div>
</div>
CSS:
.table {
display: table;
table-layout: fixed;
width: 100%;
}
.table-cell {
display: table-cell;
text-align: center;
padding: 0 5px;
border: 1px dotted black;
}
.placeholder {
max-width: 120px;
max-height: 60px;
margin: auto;
background-color: #505050;
color: #FFFFFF;
}
img {
max-width: 100%;
height: auto;
}
However, there are two problems:
As the screen gets narrower and the images are scaled, the background-color pops out from under the image. The placeholder-div is scaling just as the image, but its height is calculated (by the browser) to be some 5px more then the image height. Where does that difference come from?
When the images are not loaded (try in the fiddle by just making the image URL invalid) then the placeholder-div's height collapses. How can I make it keep the correct height?
FYI: The actually used images won't always be of the same size, but I will know their dimensions and can calculate their aspect-ratio. I would write those values (like 120px) inline instead of in a separate css-file like in the example.
Thanks in advance for any help!
Add display: block to your CSS img rule to make it a block element instead of inline and you are good to go: Fiddle
Change src="...." of one of them to src="" in the fiddle and you will see the the cell itself already scales.
By adding rule img[alt] { font-size: 2vw; overflow: hidden } to your CSS, the html alt="text" will scale too. overflow: hidden chops excess text when alt is larger than your 120x60px.
(note: [alt] is called an 'attribute' in CSS, search for 'css custom attribute' should you want to learn to create your own.)
See updated Fiddle
I would advise against loosing the width and height rules of the placeholder, but you could change it to min-height/min-width to show at least that something 'is missing'. Or change to max-width: 100% and remove max-height, but this depends on your requirements. You will need to limit the size of an image somewhere up or down the line (for example giving the table a width in px and it's children a (max-)width in % ).
Remove:
img {
height: auto;
}
problem-1 & 2:
img {
max-width: 100%;
max-height: 100%;
}
I have inherited a website where bootstrap 2 mark up is being used but the images have a html width set like so:
<img src="text.jpg" alt="blog" width="525" height="379">
So when this page is reduced down to tablet view the images break through the column/grid structure and are not being resized.
Is there a class or something I can use to make these images responsive?
Many thanks
You can add the following styles to the images:
img {
display: block;
max-width: 100%; // Set a maximum relative to the parent
height: auto; // Scale the height according to the width, otherwise you get stretching
}
Or create an .img-responsive class and add to the images:
.img-responsive {
display: block;
max-width: 100%; // Set a maximum relative to the parent
height: auto; // Scale the height according to the width, otherwise you get stretching
}
This also works without removing the width and height:
<img src="text.jpg" alt="blog" width="525" height="379" class="img-responsive">
I've just realized that these images had a css style that was overriding bootstrap.
So they were picking up this:
max-width:520px;
Instead of bootstraps:
max-width:100%;
It had nothing to do with the inline style as I first thought.
Remove width="525" height="379" and try to put % values. That is the problem here.
On my website I would like to display images uploaded by user in a new window with a specific size (width: 600px). The problem is that the images may be big. So if they are bigger than these 600px, I would like to resize them, preserving the aspect ratio.
I tried the max-width CSS property, but it doesn't work: the image's size doesn't change.
Is there any way to solve this problem?
HTML:
<div id="ImageContainerr">
<img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" />
</div>
CSS:
img.Image { max-width: 100%;}
div#ImageContainer { width: 600px; }
I also tried setting the max-width: 600px for an image, but doesn't work. The image is streamed from a servlet (it's stored outside Tomcat's webapps folder).
You can write like this:
img{
width:100%;
max-width:600px;
}
Check this http://jsfiddle.net/ErNeT/
I see this hasn't been answered as final.
I see you have max-width as 100% and width as 600. Flip those.
A simple way also is:
<img src="image.png" style="max-width:600px;width:100%">
I use this often, and then you can control individual images as well, and not have it on all img tags. You could CSS it also like below.
.image600{
width:100%;
max-width:600px;
}
<img src="image.png" class="image600">
The problem is that img tag is inline element and you can't restrict width of inline element.
So to restrict img tag width first you need to convert it into a inline-block element
img.Image{
display: inline-block;
}
Given your container width 600px.
If you want only bigger images than that to fit inside, add:
CSS:
#ImageContainer img {
max-width: 600px;
}
If you want ALL images to take the avaiable (600px) space:
#ImageContainer img {
width: 600px;
}
Try this
div#ImageContainer { width: 600px; }
#ImageContainer img{ max-width: 600px}
Your css is almost correct. You are just missing display: block; in image css.
Also one typo in your id. It should be <div id="ImageContainer">
img.Image { max-width: 100%; display: block; }
div#ImageContainer { width: 600px; }
<div id="ImageContainer">
<img src="http://placehold.it/1000x600" class="Image">
</div>
Wrap the element in a div with the fixed width/height:
<div style="width: 600px;">
<img src="whatever" />
</div>