I am trying to achieve auto resizing in my div parent block. I would like my image to resize to an exact div block width or even better if text would resize image and changes div block width so that page look neat.
<body style="margin: auto;max-width: 800px">
<div class="messages" style="color: #002b55;max-width:100%;height: auto;font-size: 11px">
<img src=cid:header.png alt="header">
<div style="margin-top: 7px"><b>Lieber Nutzer,</b></div>
for example if the image is bigger than text i would like my image to resize to the longest line
You can have images and divs resize using display: flex; Also you can have your text change size using vw instead of px such as font-size:5vw; which is in relation to the size of the view window.
Check out what I did here. And here is the jsfillde for you to play around with the window size. https://jsfiddle.net/dcxp0uqe/
.messages {
width 50%;
height 50%;
display: flex;
font-size:5vw;
}
.messages * {
display: flex;
width: 50%;
height: 50%;
}
<body style="margin: auto;max-width: 800px">
<div class="messages" style="">
<img src="https://w3schools.com/html/img_girl.jpg" alt="header">
<div style="margin-top: 7px"><b>Lieber Nutzer,</b></div>
</div>
Related
I am trying to achieve a structure like below on a webpage
https://www.figma.com/file/NfikH1inSqCgwXOSzb3VeDCW/Untitled?node-id=0%3A1
So the full width is max width 1600px. Problem is, making it responsive has become very complex.
Reason is, all the boxes are given width in percentages.
So first whole section is divided in 2 parts 50% left – 50% right.
Inside 50% left – I have added 4 images by giving 50% width
Inside 50% right – I have added 1 image by giving 100% width
If we use just images in this structure, it stays very responsive if I reduce the screen size.
But as there are texts added BELOW each images, the box that contains the text has fixed width (66px). When we reduce the screen size, this disturbs the layout responsiveness.
Any solution to make it proper responsive?
I tried making the text box as an overlay to the image, so position absolute bottom of the image which fixes the issue but then the bottom part of the image goes behind the text box.
I want to make sure the image stays full visible and the text box also stay below it.
Any thoughts? I am happy to use JS too if there is a good solution.
*{
box-sizing: border-box;
}
.fifty {
width: 50%;
padding-bottom: 66px;
position: relative;
}
.parent {
display: flex;
flex-wrap: wrap;
}
img {
width: 100%;
height: 100%;
}
.left {
display: flex;
flex-wrap: wrap;
}
p {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
}
.pb-0 {
padding-bottom: 0;
}
.child {
border: 1px solid #333;
}
<div class="parent">
<div class="left fifty pb-0">
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
<div class="fifty child">
<img src="https://dummyimage.com/350x250/aae0ff/aae0ff" alt="image"/>
<p>Text</p>
</div>
</div>
<div class="right fifty child">
<img src="https://dummyimage.com/350x250/ffa0a0/ffa0a0" alt="image"/>
<p>Text Right</p>
</div>
</div>
I think you want something like this, if needed anything else, Please let me know
I'm wanting to make my images smaller as the window size gets smaller.
However, I have to define the size of these two images by width, yet because 'max-width' overrides 'width' then it makes the images really small? I need to use 'max-width' to resize my images. However, I have two images on the left hand side that I have used both width and max-width and its width is defined and it resizes? What am I doing wrong with the other two?
img {
width: 100%;
height: auto;
width: auto\9;
}
/* css for the two larger images on the left-hand side*/
#imageleft {
display: inline-block;
height: 30px;
}
/* css for the two smaller images on the right-hand side*/
#imageright {
display: inline-block;
width: 50px;
height: 100px;
}
<!-- large images to left -->
<div id="imageleft">
<a href="index.html">
<img src="images/photo-1464375117522-1311d6a5b81f.jpeg" alt="Guitar image" style="max-width:100%; width:600px;height:400px">
</a>
<a href="index.html">
<img src="images/photo-1470020618177-f49a96241ae7.jpeg" alt="Fire breather" style="max-width:100%; width: 300px;height: 400px">
</a>
</div>
<!-- small images to the right -->
<div id="imageright">
<a href="index.html">
<img src="images/photo-1472653431158-6364773b2a56.jpeg" alt="festival" style=" max-width: 100%; height: 200px">
</a>
<a href="index.html">
<img src="images/photo-1473396413399-6717ef7c4093.jpeg" alt="stage view" style="width:291px; max-width: 100%;height: 196px">
</a>
</div>
#helpme123 I really didn't get what kind of layout you desire to achieve. Could you change your post and provide an example of it, please?
When you use width and max-width together, it's usually because you are giving the element a width relative to its parent (or the viewport or the current font-size or the base font-size), but you also want to explicitly state an absolute width, beyond which the element should not widen.
Working Example:
div {
width: 90%;
padding: 12px;
}
.parent {
max-width: 1000px;
background-color: rgb(255,0,0);
}
.child {
max-width: 600px;
background-color: rgb(255,255,0);
}
.grandchild {
max-width: 400px;
height: 100px;
background-color: rgb(0,0,255);
}
<div class="parent">
<div class="child">
<div class="grandchild">
</div>
</div>
</div>
If you run the example in a full window and shrink the window size and then gradually grow it, you'll see that the divs each widen relative to their parent... until they reach their max-width, after which they stop widening.
I have a responsive background image in a div. And i want a two column flex layout on top of it, in which the left layout have image of height 100% of the parent div with width auto scale like responsive image. and the right part is a two line text centering in the flex.
This is the closest i can get so far. But the flex does not stretch to fit the background div image and the left image does not scale accordingly when browser resize.
Note: None of the width and height in px should be specified in the code
.parent {
display: flex;
align-items: center;
}
.left {
height: 100%;
}
.right {
flex: 1;
background: blue;
}
<div style="position: relative;">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTkyfCkzwQ7Lx4v3YRNao0lQgM-VkEj6iLWTHE8KqHF5tk4cl15WQ" style="width: 100%">
<div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
<div class="parent">
<div class="left">
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRsxhzGxiYQU_vp2YlN1LTMxQsYMhFDqTZLwfqMylCwqIahCu00Mf_0aDQ">
</div>
<div class="right">
<p>
123
</p>
<p>
456
</p>
</div>
</div>
</div>
</div>
Expectation:
Remove
align-items: center;
from the parent div.
If you want to center align the text elements, use padding or position: relative/position: absolute
Then apply
height: 100%; to the image.
JSFIDDLE is here.
I have spans inside div which will split into 3 vertically align row. It works normally in high resolution browser but when I resize browser it colaps. You can resize jsfiddle window and u'll see what am I saying.
How can I solve that?
<div class="postPrevContent cal">
<span>იანვარი</span>
<span>თებერვალი</span>
<span>მარტი</span>
<span>აპრილი</span>
<span>მაისი</span>
<span>ივნისი</span>
<span>ივლისი</span>
<span>აგვისტო</span>
<span>სექტემბერი</span>
<span>ოქტომბერი</span>
<span>ნოემბერი</span>
<span>დეკემბერი</span>
</div>
Add a
min-width:100px
in your .cal span css class
You could use media queries in your CSS, this will make it into 2 columns instead of 3 when the page is below a 500px wide:
#media (max-width: 500px){
.cal span {
width: 50%;
}
}
http://jsfiddle.net/hqu6t0en/1/
you can then so the same again for a wide of 250px and make width 100% to make one column when even smaller. Or apply a minimum width to .col to stop it getting below 250px but keep 2 columns
#media (max-width: 250px){
.cal span {
width: 100%;
}
}
Or
.cal {
margin: 10px 0;
min-width: 250px;
}
change span to div, style float left and width in percent (of corse in *.css and class is beather), set min-width of parent div. 150 if you think text is max 50px width.
<div style="min-width: 150px; max-width: 800px;">
<div style=" width: 33%;float: left;">AAAAAAAA</div>
<div style=" width: 33%;float: left;">BBBBBBBB</div>
<div style=" width: 33%;float: left;">CCCCCCCCC</div>
<div style=" width: 33%;float: left;">AAAAAAAAAA</div>
<div style=" width: 33%;float: left;">BBBBBBBBBBBBB</div>
<div style=" width: 33%;float: left;">CCCCCCCCCCCC</div>
</div>
PS. Set max-width for big display. Set centre text in div.
i'm working with a website.i have a problem with the divs
<div class="parent">
<div class="child" style="display:inline-block; z-ndex:1000;">
<img src="" style="max-width:100%; max-height:100%"/>
</div>
</div>
html:
.parent {
clear: both;
float: left;
padding:0 2%;
width: 98%;
padding:0 1%;
display: block;
height:557px;
}
I have my html like this, i want my child div to wrap around the image so i gave it inline-block. but if the image is large, i'm getting the image out of the parent div.
Is there any way that it get fixed in the parent div.
Any help please .
you should set some style attributes .i.e. height and width of outer[parent] div so that contents get bounded by it.
<div class="parent" style="height: 80px; width: 80px;">
<div class="child" style="display:inline-block;">
<img src="" style="max-width:100%; max-height:100%"/>
</div>
</div>
Try to set some height and width to your parent and Child Div.
Sample code which has image size larger than parent Div
<div class="parent" style="background-color: pink; height: 100px; width: 100px;">
<div style="display: inline-block; background-color: black; height: 80px; width: 80px;" class="child">
<img style="max-width:100%; max-height:100%" src="../somepath.JPG">
</div>
</div>
Mention the fixed height and width in pixel to parent DIV .Image will fix in the parent DIV
Take a look Fiddle. Actually image size 200*200 px ,parent DIV size 100*100 px .Now it will fix
HTML :
<div class="parent">
<div class="child" style="display:inline-block; z-ndex:1000;">
<img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="max-width:100%; max-height:100%"/>
</div>
</div>
CSS :
.parent
{
clear: both;
float: left;
padding:0 2%;
width: 100px;
padding:0 1%;
display: block;
height: 100px;
}
Now your .parent div has width:98%, As it is in % the div will attain a width 98% of the current viewport or browser window you used to view the site irrespective of the content inside..
So even if your image inside .parent div is larger, div will get only the 98% of window.
1.) if you want your image in its original size and the parent should wrapped around, you can go with this:
remove width:98% from .parent and remove max-width from image.
2.) If you are looking to resize the image with respect to the width attained by .parent
You can use the same code you are using now.