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>
Related
I have the following: jsfiddle.net
What I'm trying to do is have the image float left of the text such that it fills the parent (.box). Note that the .box can vary in height depending on the number of lines of text.
The end result should look like this:
How would this be done?
.box {
position: relative;
display: block;
width: 600px;
padding: 24px;
margin-bottom: 24px;
border: 2px solid red;
}
.img {
float: left;
}
.text {
font-size: 14px;
}
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box is one line.</div>
</div>
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</div>
</div>
You can use display: table on the parent element and display: table-cell on the children.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
width: 100%;
}
figure {
display: table;
width: 600px;
height: auto;
margin-bottom: 24px;
border: 2px solid red;
}
img {
float: left;
display: table-cell;
min-height: 100%;
margin-right: 20px;
}
figcaption {
font-size: 14px;
height: 100%;
}
</style>
</head>
<body>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box is one line.</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</figcaption>
</figure>
</body>
</html>
As far as I know there is no HTML/CSS only solution to make this work - correct me if I'm wrong. The OP wants to have an image with unknown size dynamically scaled to the parent's container's height. This container on the other hand depends dynamically on the text length and has no fixed height. The image size can vary, the text size can vary.
Here a proof of concept solution using jQuery and <img> instead of background-image with the following result:
HTML:
<div class="box">
<img class="img" data-src='https://placehold.it/500x500'>
<div class="text">This box is one line.</div>
</div>
JavaScript / jQuery
var $boxes = $('.box');
var $imgs = $boxes.find('.img');
for (var i = 0; i < $boxes.length; i++) {
var heightParent = $boxes.eq(i).outerHeight() - 4;
// -4 because of border 2px top + 2px bottom
$imgs.eq(i).attr('src', $imgs.eq(i).attr('data-src'));
$imgs.eq(i).height(heightParent);
}
CSS (only changed part):
.img {
float:left;
margin-left: -24px;
margin-top: -24px;
margin-right: 10px;
}
It's not such a trivial thing to achieve what you want as you don't want to set height. Not on the image and not on the parent container.
Problems using background-image:
With the background-image approach it would easy be possible to position the image correctly scaled to the left with position:absolute, but the margin to the right (to the text) would not work, as the width can be different.
Problems using img:
On the other side with the use of <img> you have the problem, that the parent <div> will always be in the original height of the image, as long as no parent has a fixed height - which is the case in your example.
JavaScript for partly making it work:
To avoid this you can avoid the creation of the image on page load by setting the url to a data attribute, I called it data-src. Now when the page is load, you can look for the parent's <div> natural height. Next you pass the URL from the data-src attribute to the src attribute so that the image is rendered.
As we know the former parent's height we can set it as the image height.
The CSS negative margins are there to undo your setting of padding: 24px on the parent's container so that the image is correctly positioned. If you ask yourself why I subtract 4 from the height - this is because you want your image to be within the border, so we need to subtract the 2px to the top + the 2px to the bottom of your border.
Note: Of course this solution would not work responsive without further scripting, but your parent <div> seems not to be responsive anyway.
Fiddle: https://jsfiddle.net/av9pk5kv/
Problems with the layout wish and the above example:
You could argue that the wished layout is not worth aspiring to in the first place, it will not work with more amount of text if you don't change something else. At some point there is so much text, so that it's just impossible to place the image filling the parent:
To avoid it partly you would have to remove the fixed width of the parent.
But the same (or similar) result will happen if the dynamically including of the image via JavaScript leads to more text lines as there were before (the text is squeezed).
How would I solve these problems: I'd use another layout.
Ok, here is the problem, my app allow users to insert any image. It is up to them insert very big or very long image. But when I rentder image I want the width="50px" and height="100px".
ok if I do
.myImage{
width:50px;
height:100px;
}
then the image could be distorted cos the proportion is not accurate. So, here is what I think. First I want the image to have width:50px then if the height>100px, then CSS will trim off the bottom.
Ok, let see this example, user inserted a big image with width=150px and height=600px. So if I reduce the width to 50px, the the height will be 200px. I want to cut the bottom of the image so it will show only (w: 50px, h: 100px) see the picture:
So how to do that?
1) Trim image with <div> and overflow:hidden:
div.trim {
max-height:100px;
max-width: 50px;
overflow: hidden;
}
<div class="trim"><img src="veryBigImage.png"/></div>
2) Use max-width: 50px; and max-height: 100px for image itself. So image will preserve it's dimensions
I would suggest using the CSS CLIP property to trim it to the size you want.
img {
position: absolute;
clip: rect(0px,50px,100px,0px);
width:50px;
}
That way, if the image is small enough, nothing will get cut off. Otherwise, you trim it down.
You could wrap the img with a div and apply overflow: hidden;
HTML:
<div class="img-wrapper">
<img src="path/to/image.jpg" />
</div>
CSS:
.img-wrapper{
max-height: 100px;
overflow: hidden;
}
.img-wrapper img{
width: 50px;
}
By using max-width and max-height you can set height to whatever you want and the full image will display.
.myImage{
height:auto;
width:auto;
max-width:300px;
max-height:300px;
}
You need to put the image in a container of the desired trim size with overflow:hidden
html:
<div id="container"><img src="myimage.jpg"/></div>
css:
#container {width:50px;height:100px;overflow:hidden}
#container img {width:50px;}
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);
});
});
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; }
So, I want to have an image resized to 30% of its original height/width. Pretend you don't know its height or width, how would you go about it using only CSS/HTML?
If you need a quick inline solution:
<img style="max-width: 100px; height: auto; " src="image.jpg" />
Update:
Using a display: inline-block; wrapper, it's possible to make this happen with CSS only.
HTML
<div class="holder">
<img src="your-image.jpg" />
</div>
CSS
.holder {
width: auto;
display: inline-block;
}
.holder img {
width: 30%; /* Will shrink image to 30% of its original width */
height: auto;
}
The wrapper collapses to the original width of the image, and then the width: 30% CSS rule on the images causes the image to shrink down to 30% of its parent's width (which was its original width).
Here's a demo in action.
Sadly no pure HTML/CSS way to do it as neither is geared to perform calculations like that. However, it's pretty simple with a snippet of jQuery:
$('img.toResizeClass').each(function(){
var $img = $(this),
imgWidth = $img.width(),
imgHeight = $img.height();
if(imgWidth > imgHeight){
$img.width(imgWidth * 0.3);
} else {
$img.height(imgHeight * 0.3);
}
});
<img style="max-width: 100%; height: auto; " src="image.jpg" />
i am using percent to max-width and very nice