I want use floatet image with some text about this image in my content.
I'm using this HTML + CSS for this:
<p class="container">
<img src="http://www.google.com.ua/images/logos/ps_logo2.png" width="200"/>
<span class="text">Some text wider that image image image blablabla</span>
And CSS for it:
.container { float:right; border:2px solid #000; }
.container img { display:block; margin-bottom:10px; }
But, if text about image is wider, it is expand floated parent. I'm not want this behaviour. I want to limit max-width of parent p element to width of image.
Here example on jsfiddle: http://jsfiddle.net/wBVqt/1/
I can do what I want through position:absolute and padding-bottom, but I don't know value for padding-bottom. jsfiddle.net/wBVqt/3/
I don't see solution with only css if you want to have images of different sizes, so chek my solution with jQuery:
var imageWidth = 0;
$('.container img').each(function(index, el){
if(el.width > imageWidth) {
imageWidth = el.width;
}
});
imageWidth = imageWidth ? imageWidth : '100%';
$('.container').css('width', imageWidth);
It will work yet if you have a lot of images in your container. If you have no images, it will set originally 100% width to container.
Have you tried just putting a width on the container? (Which you should do anyway if you want your code to validate, as all floated elemets should have a width).
.container { float:right; border:2px solid #000; width: 200px; }
Related
I want to have text directly below an image that I am scaling with transform: scale(0.50, 0.50);
The issue is that the height and width of the bounding box of the image don't scale with the image. There was another post from which I got this image example of scaled image, but it is not the answer I'm looking for. How can I make the borders of the larger, pre-scaled image match the smaller, new scale of the image? My code is as follows:
.content #imagediv {
background-color: blue;
}
.content #imagediv img {
transform: scale(0.50, 0.50);
transform-origin: top left;
display: inline-block;
}
This looks like this
I think you'll have to change the image size using another method. I don't think transfrom: scale will work in this case. Why not just set the image width and let the height be dynamic?? The text will sit right under the image at that point. You could also use js to change the width of the image to 50% of its original if you need it to be 50%.
var img = document.getElementById('image');
//or however you get a handle to the IMG
var width = img.clientWidth;
img.style.width = (width / 2) + 'px';
.content #imagediv {
background-color: blue;
line-height:0; //used to get rid of extra space after the image.
}
.content #imagediv img {
width:400px; //changes to 200px with js. Even if this is not set it will still get set to 200px because the js is calulating based off the image size.
}
<div class="content">
<div id="imagediv">
<img id="image" src="https://via.placeholder.com/400x400" />
</div>
<span>Random Text I want right below the image</span>
</div>
I have a website, let's take http://www.example.com. In my html I have
<div style="height:100vh;"><iframe src="http://www.example.com" style="position: relative; width: 100%; height: 100%; border:0;"></iframe></div>
Here the div has the height of 100vh but I want to get the height of example.com and automatically apply it to the div. Can I do that?
Here is a working JSFIDDLE https://jsfiddle.net/jsz9ur1g/1/
HTML
Alot of times the html doesn't expand to the full bodys height, So i added a div
called getHeight right before the body tag and gave it a position of absolute. This will ensure that it expands to 100% of the document height
<div id="getHeight">
</div>
<div id="yourElement">
</div>
CSS
As you can see i gave the HTML a min height and set the getHeight div to position absolute and gave it a height of 100%.
html{
min-height:500px;
}
#getHeight{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
}
#yourElement{
background:red;
color:#fff;
font-size:20px;
}
JS
var bodyHeight = document.querySelector("#getHeight").offsetHeight;
//or use clientHeight if you don't car about scrollbars and borders
var yourElement = document.getElementById("yourElement");
yourElement.style.height = bodyHeight + "px";
yourElement.innerHTML = "see the height of the actual document is " + bodyHeight + "px";
In wordpress, I want to show a height reduced image but keeping width and ratio.
The image is 400px large and 300px height. I want it 400px large but only 200px height, and centered.
This solution may help me but is uses div ?
Crop and center image without using background-image
But I can't add any div around image because wordpress doesnt create any. May be could I create a div using PHP ou JS ?
Here is the html created by Wordpres :
<p>
<a href="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
<img width="400" height="300" src="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
</a>
</p>
and a JSFiddle to try :
http://jsfiddle.net/v4w90e29/
If anyone can help me, thanks a lot !!!
Use JQuery document ready function with this code
var divs = jQuery("img");
for(var i = 0; i < divs.length; i+=3) {
divs.slice(i, i+3).wrapAll("<div class='wrapper'></div>");
}
After this your image will be in the div with class wrapper. After that just simple css.
For wrapper it will be:
.wrapper {height:400px; width:200px; overflow:hidden;}
You can wrap the image very easily with jQuery.
$(document).ready(function() {
// let's only include the images in paragraphs as the site most likely has other img elements somewhere.
var paragraphImages = $("p img");
paragraphImages.each(function() {
$t = $(this); // $(this) -> the current img in the loop.
$t.wrapAll("<span class='wrapper'></span>");
// margin-top = negative of images height divided by 2.
$t.css("margin-top", -$t.height()/2);
});
});
p a img {
max-width: 400px;
}
.wrapper {
height: 200px;
width: 400px;
overflow: hidden;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<a href="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
<img width="1000" height="750" src="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
</a>
</p>
<p>
<a href="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
<img width="1000" height="400" src="http://finance.blog.lemonde.fr/files/2012/09/IMG-20120909-00051.jpg">
</a>
</p>
I made a quick example of images aligned horizontally:
All of the images adjust to the height of the "wrap" div.
http://i.imgur.com/VOA1pBG.png
Yet, when I make the window smaller, images start to come out of the div and go below as such:
http://i.imgur.com/VKUA4Ju.png
I want to make it so as I make the window smaller, the images get smaller. To fit horizontally in the size of the browser.
Here is the code used to make the existing page:
html:
<h1> Thriller </h1>
<div id="week-wrap">
<div id="sunday" class="day"><img src="http://www.allipadwallpaper.com/wp-content/uploads/tropical-island-ipad-wallpaper-500x500.jpg"></div>
<div id="monday" class="day"><img src="http://mountains.insidrinfo.com/mountains-asia/Media/mountains-asia.jpg"></div>
<div id="tuesday" class="day"><img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg"></div>
</div>
CSS:
body{margin: 0 auto;}
#week-wrap {border: 1px solid #000; height: 300px;}
.day {float: left;}
img {height: 100%;}
Instead of float: left use display: inline-block for the divs. Then, add white-space: nowrap to the container.
http://jsfiddle.net/ExplosionPIlls/uYTxW/
try resizing image div with javascript on resize window:
$(window).bind("resize", function(){ //Adjusts image when browser resized
// do your image size logic here
// $('#week-wrap').width(); // width of div container
});
I would advocate removing the divs around each image. You can style the images directly. Also, instead of setting an explicit height on your wrapper, set overflow: hidden to establish a block formatting context so that it automatically expands to contain your floats.
You wind up with markup like:
<h1> Thriller </h1>
<div id="week-wrap">
<img src="http://www.allipadwallpaper.com/wp-content/uploads/tropical-island-ipad-wallpaper-500x500.jpg" id="sunday" />
<img src="http://mountains.insidrinfo.com/mountains-asia/Media/mountains-asia.jpg" id="monday" />
<img src="http://s4.favim.com/orig/50/beautiful-city-light-night-street-Favim.com-460323.jpg" id="tuesday" />
</div>
and CSS like:
body{margin: 0 auto;}
#week-wrap {border: 1px solid #000; overflow: hidden; }
#week-wrap > img { width: 33.333%; height: auto; float: left;}
with this result: http://jsfiddle.net/4Aytd/
var imageSizer = function () {
var images = document.querySelectorAll('#week-wrap > img'),
numImages = images.length,
imageWidth = (100/numImages) + '%',
i;
for(i = numImages-1; i >= 0; i--) {
images[i].style.width = imageWidth;
}
};
http://jsfiddle.net/4Aytd/4/
In my html file i have used a SpryTabbledPanels plugin. In that there are three div tags.
In one div tag my data is less and another div tag my data is more. I used hover for that. When I hover on first div tag it shows data. but there is much empty space at the bottom and in another div tag there is not much space.
So please can I change the height of background image in div tag?
Following is css for background image:
#main-content {
/*margin:0px 225px;*/
margin-left:auto;
margin-right:auto;
margin-top:35px;
width:900px;
/*width:100%;*/
height:auto;
/*height:1053px;*/
/*background: -moz-linear-gradient(top, #fff , #ccc);
background: -webkit-gradient(linear, left top, left bottom, (#E5E5E5) to(#ccc));
background: filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#000000.');*/
border-top-left-radius:48px;
border-top-right-radius:48px;
border-bottom-left-radius:48px;
border-bottom-right-radius:48px;
padding-bottom:20px;
min-height:1450px;
background:url(res/back-img.png) repeat;
}
Following are screenshots:
there is a simple trick you can do
your html for example should look like
<div id="main-content">
<img src="res/back-img.png" />
<p>some content</p>
</div>
and your css should look like:
#main-content{
position: relative;
/* the rest of your css */
}
#main-content img{
width: 100%;
height: 100%;
z-index: -10;
position: absolute;
}
this will make the image act like a background image and change according to the width and height of the main-conent div
you can create 2 samle CSS classes which will define the hieght and width of the background image.
Let's say...
.class1{
width : x1 px;
height : y1 px;
}
.class2{
width : x2 px;
height : y2 px;
}
so here y1 < y2 meaning class1 is the class you should apply to your background image element when you want the background image to be samll ie; onclick of first div tag.
Also when u click on 3 div tag(when u want the size of image bigger) just simply toggle the class of your image to class2. So the image will be larger. In jQuery u can do this quite easily as..
$("get ur image element here").class("class1"); //whwen u want image to be samller
$("ur image element").class("class2"); //when u want the image to be larger
Good Luck.
div {
width:50px;
height:100px;
background:red;
}
This is jquery to change the background image height
We can give any height as we want.
$(document).ready(function(){
$("#tab1").hover(function(){
var height = 1000;
$('#main-content').height(height);
});
$("#tab2").hover(function(){
var height = 1200;
$('#main-content').height(height);
});
$("#tab3").hover(function(){
var height = 1400;
$('#main-content').height(height);
});
});