I want create a responsive image in my doc.
<style>
img,.img {
width: 80%;
height: auto;
}
</style>
<body>
<div>
<img src="img/tools3/2.png" />
</div>
<body>
Now I try convert img to div:
<body>
<div>
<div class="img" style="img/tools3/2.png"></div>
</div>
<body>
But not showing any images!
If I change height: auto; to height: 100px; it works but it's not responsive else...
Also I add:
box-sizing: border-box;
clear: both;
to .img but not working.
You don't need the pic in the div, you can have that in the img tag.
The img tag can be changed on hover using css
.img:hover {
content:url(NEWPICPATH);
}
See this answer for more details on changing src this way.
To do responsive images you need to set the max-width property to 100%. Images always have to be an img tag unless you decide to use background-image on a div.
What you have to do is this ....
In html ....
<div style="width:50%;height:50%">
<img style="width:100%; height:100%;" src="http://www.hdwallpaperscool.com/wp-content/uploads/2013/11/california-beautiful-natyre-hd-wallpapers-widescreen-cool-images.jpg" />
</div>
you can give any height or width for the div.If you want you can use style in external style sheet.
I suggest you to try bootstrap.it is pretty easy.
looking at the below
<div>
<div class="img" style="img/tools3/2.png"></div>
</div>
The image will not show because
you have
style as "img/tools3/2.png"
A div is a container that can hold an image it, it does not have a source property like an image tag that points to a link.
If you want to make the image display like a div you can simply do
img{
display:block
}
However you can also set a div background to te an image like this
div {
width:put your width here;
height: put yout height here;
background-image:url("url here");
background-size: cover;
}
here is a
div {
width:500px;
height:500px;
background-image:url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTcKiWvJ9_lKvgooA-T8VMt9BBVpex3VI-NVUkNrGhiECN3YkRdqQ");
background-size: cover;;
<div>
</div>
Related
I have an image tag like
<img />
I then dynamically download a link to an image, and I set the image src to that link. I do not know the dimensions of the image in the link. Is there a CSS code I can use to make sure the width of the image is exactly 200px (no crop, just stretch to fit) and the height of the image is the same as on the original image? (so basically just a horizontal scale when original dimensions are not known). Whatever I try, it seems to preserve the aspect ratio.
Thanks
Here's an example: I am dynamically loading this image:
I don't know its dimensions, But in the end, I want it to look like (pretend its width is 200px).
This is what you are looking for.
function formatImage(t)
{
//var t = document.getElementById("idOfImg");
alert(t.naturalWidth + " " + t.naturalHeight);
t.height = t.naturalHeight;
t.width = "200";
}
On every image that you want this behavior add onload=formatImage(this);
JSFiddle
https://jsfiddle.net/94rzcLh6/
Lmk if it works. I have not used proper naming on fiddle kindly ignore that.
how about this:
css:
.content{
display:table;
}
.thumb{
width:200px;
height:100%;
display:table-cell;
vertical-align:top;
}
.thumb .in, .thumb .in img{
width:100%;
height:100%;
}
html:
<div class="content">
<div class="thumb">
<div class="in">
<img src="http://www.planwallpaper.com/static/cache/7b/30/7b306aff620b08d0eefdb6b37f57abc8.jpg" />
</div>
</div>
<div class="thumb">
<div class="in">
<img src="http://www.planwallpaper.com/static/cache/a6/4f/a64ffdfc06a8bea4ed2e62f2a44b063d.jpg" />
</div>
</div>
<div class="thumb">
<div class="in">
<img src="http://www.gettyimages.es/gi-resources/images/RoyaltyFree/113198687.jpg" />
</div>
</div>
</div>
jsfiddle
In the jsfidle sample I check the height and this preserve it.Taking from 2 browsers.The same is for other images.
You need to wrap your image in a container that can help you preserve the 200px constrain you want to apply on your image. The height will adapt to the width which is neat since you won`t have to worry about it.
The below example shows what you can do with a custom size image, from placeholdit, you can modify it as you like. I also advise you to play around with the .wrapper width in order to identify any changes you wish to apply such as adding width: 200px; width: auto; instead... this .wrapper is a very flexible container and that is what you need, you can change it however you like.
EDIT
Going by the comments below, I decided to modify the wrapper of the image to force the image to lose it's aspect ratio. First, I am using a position: absolute (you can also use position: fixed). I also made the image dimensions completely disproportionate to the .wrapper dimensions, to further elaborate on the necessity of losing aspect ratio.
Note: Since it is only a demonstration, I am not worrying about multiple images and how to position them properly (that is another question entirely).
.wrapper {
width: 200px;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.wrapper img {
width: 100%;
height: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/1500x1000" alt="some image">
</div>
Feel free to play around with the .wrapper to
I am trying to put an image into my Website.
The image is in a div that hast got a fixed size.
The Problem is that the image stretches the whole div
when I use auto height in CSS.
The Image fits into its div setting its height and width to 100%:
Now I would like to keep the Image unstretched.
So I set the width 100% and the height as auto
as it is described here
After setting that the image is in a layer under the section below
but layers on the next part of the page.
here is the HTML Code I used:
<div class="section4">
<section class="half">
<div class="officePicContainer">
<img src="officePic.jpg" alt="New Office of MEGO" class="officePic">
</div>
</section>
<section class="half">
</section>
</div>
And The CSS Code:
.half {
height: 50%;
position: relative;
}
.half:first-child {
}
.half:last-child {
background: #950049;
}
.officePic {
height: auto;
width: 100%;
}
How can I resize the image and fitting into its parent div without stretching it? Is it still possible in CSS? Or is Java Script needed?
Thanks for help!
Create div and, the background-size:cover css tag and set position: fixed
<div class="demo" style="background-image:url(example.png);background-size: cover; background-position:center center;"></div>
<div><img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" width=100% /></div>
So I'm trying to create a simple layering technique, by putting an image behind a video in html/css. To give the video section some meaning and background style.
Heres a photoshop mockup of what I'm trying to achieve.
http://s8.postimg.org/tl749vxvp/example.jpg
HTML
div id= "background">
img src="images/imgc.jpg" class="stretch" alt="image"
*Video embedding goes here*
CSS
.stretch {
width : 100%;
height: auto;%;
}
#background {
position: relative ;
}
#wrapper {
background-size: 100% auto;
}
You need to center the video player div over the image(or preferably, a div with a background image). Here's some html:
<html>
<head>
<!-- Flowplayer js and css -->
</head>
<body>
<div style="width:100%; height:100%; background-image:url('path/to/your/image.png');">
<div id="player" style="width:600px; height:400px; position:absolute; left:50%; margin-left:-300px; top:50%; margin-top:-200px"></div>
</div>
</body>
</html>
Note: that this css:
width:600px;
height:400px;
position:absolute;
left:50%;
margin-left:-300px;
top:50%;
margin-top:-200px
makes a div of 600px x 400px and centers it within the parent div. If you need to change the height to 800px for example, change margin-top to 1/2 of the amount, in this case -400px
I should mention that there are various css options for the background image of the main div, read about them here: http://www.w3schools.com/cssref/css3_pr_background.asp. You may want to look at background-size:contain
After you have the div centered over the image as desired, just follow the instructions here (http://flash.flowplayer.org/documentation/installation/index.html) to get your video playing with flowplayer.
I would use z-index, this allows you to set the vertical stacking
See: http://html.net/tutorials/css/lesson15.php
and
http://css-tricks.com/almanac/properties/z/z-index/
The easiest method would be to place the video in a div and set that div's CSS background-image property to the image you are trying to use:
HTML:
<div class="film-background">
*Video embedding goes here*
</div>
CSS:
.film-background {
background-image: url('url of your film image');
background-repeat: no-repeat;
}
OR you could use absolute positioning and z-index, and apply the style to the image instead of the container div:
HTML
<div>
<img src="img link" class="film-background">
*Video embedding goes here*
</div>
CSS
.film-background {
z-index: -1;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
I have a piece of fixed html which is beyond my reach to change and I would like to style it to my liking, but I can't figure out how. This is what I have:
<a title="some title" href="...">
<img src="....jpg"></img>
Some text
</a>
CSS:
div.container-outer {
width: 25%;
float:left;
}
div.container-inner {
width: 156px;
margin: 5px;
}
div.container-inner img {
max-width: 156px;
max-height: 124px;
}
I would like the text centered under the img, and both text and img centered in a fixed width containing div. The width and height of the images are unknown, but there is a max-width and a max-height, and the max-width is smaller than the containing div. Also, the bottom of the picture should be at a fixed position inside the containing div.
I'm free to modify the html around this code snippet.
Is this even possible? I have bashed my head into the wall for the last hour and I'm still clueless....
Best Regards,
Markus
edit 130513 ------------------------------------------------
Added current CSS. This leaves me with the image left-aligned, and the text below also left aligned. If the image changes height then the bottom part of the image moves since it is top aligned.
Have you tried
<div style="text-align:center">
<img src="..." alt="..." /><br />
<span>text<span>
</div>
You can style the div's width in the style param itself. You need to BR after the img because img are inline objects like loose text (text not wrapped inside a P element or something.
The span is only there because you can later style it
So far I haven't managed to do this in CSS... could you use Javascript?
<!DOCTYPE html>
<html>
<head>
<style>
div.container-inner {
width: 156px;
text-align: center;
border: 1px solid red;
}
</style>
<script>
function addBr() {
document.getElementById('container-inner').innerHTML = document.getElementById('container-inner').innerHTML.replace(/(<img.+?>)/, '$1<br>');
}
</script>
</head>
<body onload="addBr();">
<div id="container-inner" class="container-inner">
<a title="some title" href="...">
<img src="images/sample.jpg">
Some text
</a>
</div>
</body>
</html>
Demo: http://doug.exploittheweb.com/SO/16521934.html
FWIW, </img> is not valid HTML and almost certainly won't be present in .innerHTML even if it's there in the source code.
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>