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.
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 am trying to achieve similar effect as is on this page: http://ketrawars.com
When you try to resize a browser window, all images resize along with it. I can get that working if my div contains one image to which I set width 100%. However, I have a problem when I need to put 3 images one next to another.
My code:
<div class="content">
<img src="images/main_01.png" alt="" />
</div>
<div class="content">
<img src="images/main_02.png" alt="" />
<img src="images/main_03.png" alt="" />
<img src="images/main_04.png" alt="" />
</div>
CSS:
.content {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: relative;
top: 0;
left: 0;
}
This is what it does:
And this is what is desired:
With the option to write text on the middle image (second one).
If you have three equally sized images, then set each of their widths to 32%:
.content img {
width:32%;
}
img elements are displayed as inline, by default. This means that the browser will add inline space between them, causing line breaks- you must subtract a percentage or two to compensate for this space.
I recommend displaying the images as blocks and then floating them to remove the inline space.
.content img {
display:block;
margin:0;
padding:0;
float:left;
width:33%;
}
If your images aren't equally sized, simply set their percentages so that all of the elements' widths add to 100.
Another good way to ensure that things will resize with the screen to use viewport units: vw and vh. They're defined as 1/100 the width and height of the viewport, respectively. Only Gecko based browsers will update them dynamically, however.
Codepen
I have a table with images and text content, these images have a set width using:
<img src="" width="250">
Some of these images are added to the tables dynamically during runtime with jQuery. If a really large image is added, the table width become larger than screensize. I have in my CSS for table width:value of its container.
How can i make the images shrink so the table never gets bigger than it's width in pixels? I don't want to remove the width tag from the image.
You can set the with via CSS:
img{
width:100%; height:auto;
}
Also, instead of using an image tag, you could use the table cell itself. For example:
<td class="image"></td>
And then styling that image class for the cell:
.image {
background: url(http://i.imgur.com/fWmztPH.jpg);
}
I put a fiddle for you: http://jsfiddle.net/7bbcf2cy/
if your image is in td like
<td>
<img src="#" width="250">
</td>
add css style in your code (but don't forget to delete 1 line with comment)
td img {
display: block;
width: 100%; /* if td size is definied, and image must be fullwidth */
max-width: 250px; /* if you want images not to be larger than 250px */
height: auto;
}
I load images dynamically into my webpage and make them responsive:
<div id="images"><img id="dynamic_img" src=""/></div>
css:
#images{
height: 80%;
width: 30%
}
img{
max-height: auto
max-width:100%
}
Problem now is, that the images have different heights and widths. Now this works when the width of an image is longer than its height but not the other way around. (in this case max-height would be 100% and max-width: auto
Is this possible to switch these two values according to the image loaded in CSS or do I need to use JS for that?
Thanks in advance
Here you have an example where images are fitted horizontal and vertically.
I used
img {
max-width: 100%;
max-height: 100%;
}
Here you are: https://jsfiddle.net/jormaechea/j219ucnc/1/
Update
The key to achieve this is to set
html, body {
height: 100%;
}
<div id="images"><img class="img" src="" alt="" /></div>
.img
{
width=100%;
}
your div should have width=100% for example.
don't use max-width
you can set the #images div also a with of 80% - it will be responsive and the image refits to the divs width
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>