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;
}
Related
I'm currently learning HTML and wanted to get my page to follow this format
HTML Web Output
So far I was able to get the image to the correct alignment and set my width of my images to 50%.
I want to have the text size next to it to match the height of the images, I saw other post that said to set the height of the text to the images height __px but I would like my height to be dynamic because depending on the window size my image height also changes how would I go about doing this on my css file.
Thank you.
Use vw when setting the height in that way when screen is resize. the height of your textbox is also resize.
Here's an example. Just adjust the value of your height in textbox that match the image height.
.text_center {text-align:center;}
.image,.text {width:33%;display:inline-block;vertical-align:top;position:relative;}
.image img {width:100%;max-width:100%;}
.text {border:1px solid #000;height:20vw;padding:20px;}
<div class="text_center">
<div class="image">
<img src="https://cc.sj-cdn.net/instructor/z6375m3nz68l-juvare/courses/6oytt1p0oah5/promo-image.1588082521.jpg">
</div>
<div class="text">
Sample Text
</div>
</div>
As i don't have comment option, i am adding as an answer.
You can add same class as image and set the height property.
You can use table also. Add a table and put all your elements in it. Set the properties.
easiest way is to use the css-grid. You just do a 2 column layout with 2 equal columns. The height within a row will always be the same. Full responsiveness, lowest coding efford.
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
margin: 10px;
}
div {
border: 1px solid black;
padding: 5px;
}
img {
width: 100%;
}
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
<div>Text</div>
<div>Text</div>
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
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 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 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
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.