I have a div that contains an image, in css I set the image height to 100% (inherit div's height), and the image width to auto, since I have different images with different widths but I want the all to have the same height.
I am also using jquery script to read the image's width and use it a number. everything works just fine in all browsers, except for safari.
when I used a jquery alert to get the value of the width I got 0 in safari (all other browsers returned valid values)
Clearly, there is some issue with the safari browser here, can anyone help me to find a solution for this?
here is a simplified example of the code:
css:
.example-div { height: 500px; width: 100%; position: absolute; }
.example-div img { height: 100%; width: auto; position: absolute; left: 0; }
html:
<div class="example-div">
<img src="example.jpg" />
</div>
jquery:
var i= $('.example-div img').width();
$('.example-div img').css('left', i);
* I forgot to mention - I am running the safari browser from windows O/S. I don't know if this issue occurs also on a mac PC *
Related
Browser is rendering extra white space on the right side on mobile screens. I tried modifying the following properties without any progress:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
It still does not remove the extra white space. I also don't see any element overflowing from the side of the grid. Any ideas?
Thanks!
My website: fanismahmalat.com
It seems to be something odd happening when switching to mobile with the scrollbar leaving the white space.
I added the following into CSS in the Chrome inspector and it fixed the issue:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
I only tested this in Chrome, and again with the inspector, but this may help. I noticed you had height:1000px (hardcoded to 1000px). I'm not sure why exactly, but I think you can leave that as such if necessary.
The problem is in the image of the laptop that is exceeding in width.
https://i.stack.imgur.com/zlg6R.png
Is there a way to modify how the fullscreen functionality of a video behaves in a browser? I would like to display the video on the left side of my screen and an image (actually a PDF) on the right side.
I have tried it with css in chrome:
video:-webkit-full-screen
And that gave me some results, but not the desired one. Should I create a custom action for this? And if so, how can I let the video break out of the borders of the browsers?
You should insert the <video> tag inside a <div> with a defined height and width with the following attributes:
.video-container {
position: relative;
height: auto;
width: 60%;
}
video {
width: 100%;
max-width: 500px; // Or whatever value on your choice
height: auto;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
With a width of 100%, the video would fill the entire browser space but limit how big it can be by setting a max-width or max-height for the resolution and the responsiveness. I hope that my answer helps you!
EDIT
To fit in properly inside a div, you have to assign to the container position: relative and position: absolute to the video itself. If you want to break out from the borders, then you have to tweak the dimensions of max-height and max-widthof the video.
Check this question, since it is similar to yours.
I've noticed a strange bug while using a textarea in a my project.
At first I thought there was a problem in my code but then I was able to replicate that bug extracting the essenial in a JsFiddle .
The problem is:
If I change the height of the textarea by code without any interactions from the user before, the height get stuck at that size.
For example, if you click to the button "Change size" (in the jsfiddle above) and then try to resize back to the initial size using the element grip (at the bottom-right corner), you can't. It's like if that new height is the new ''minimum allowed size'' of the textarea.
What am I doing wrong? what am I missing?
Thank you in advance.
Height overrides min-height in Chrome.
In older versions of chrome there was no restriction.
So if you use height min-height will be your height. So you need to
set min-height and max-height only. Height overrides min-height in
Chrome.
textarea{
max-height: auto;
min-height: 50px;
resize: both;
}
Okay this solution works for me (chrome Version 47.0.2526.111 m):
https://jsfiddle.net/ezsz8xr5/9/
I found this interestining link: https://code.google.com/p/chromium/issues/detail?id=94583
Seems that it is a known issue.
I know this question has been asked a while ago, but there's no good answer to it, and I found a solution.
What I found is that putting a % height for the textarea will not change it according to its parent.
If you put the rule resize: vertical, changing manually the height you'll notice that your browser will put the style.height in pixels.
So I tried putting height: 150px and it worked.
So here are two solutions :
First, put your textarea's height in pixels, not in percentage.
parent {
width: 150px;
}
parent textarea {
height: 100%; /* not working ! */
}
/* Instead, do : */
/* css variable */
:host {
--height: 150px;
}
parent {
height: var(--height);
}
parent textarea {
height: var(--height);
}
For a SCSS way :
parent {
$height: 150px;
height: $height;
textarea {
height: $height;
}
}
Second, declare the textarea parent's display as flex, and without any additional rule, it will automatically resize your textarea. If it does not, then do this :
parent {
display: flex;
/* if flex doesn't work by itself, add this + textarea rule : */
flex-flow: column nowrap;
}
parent textarea {
flex: 1; /* tells the textarea to fit all the free space it finds */
}
It seems like a browser issue yes, still not fixed in 2022, sadly. If it is intentional, then it's even not documented.
Hope this will help someone in the future.
I have got a tiny problem, im creating a website and i want to give an image a max-height. The image may only have the same height of another div.
You can check the layout here: http://bit.ly/1OAGsLR
Its about the 1920x1080 image, and i needs to be the same height as the div with class box left to it. If right the image should scale well.
But im trying all i know but i dont get it working, can someone get this working with CSS or do i need to use Javascript for this?
Thanks in advance!
Your image is looking the way you want when the screen width is at or above 1400px. You should consider using css media queries to move or adjust the image at different screen widths. Your layout could easily be handled using a css framework like foundation or bootstrap which would take care of css media query breakpoints for you.
If you are intentionally trying to not use a css framework, I'd check out this css media queries tutorial to get you started.
You need to make your container div wider.
Your container is 1200px wide, and your boxes are 560 + 40 padding wide each.
That means that the max width of you image is 560px.
Now to conserve it's aspect ratio of 16:9, the max height of the image is 560 / 16 * 9 = 315 pixels.
Okay, your main problem is that heights don't like to be defined this way. I have a solution for you that will 'solve' this issue, but its not very pretty and you might want to look into doing this with javascript anyhow. Below is a very rough example mockup.
body > div {
width: 100%;
max-width: 500px;
background: green;
padding: 10px;
position: relative;
}
body > div > div {
width: 50%;
padding: 20px;
}
body > div > img {
position: absolute;
right: 20px;
top: 20px;
max-width: 50%;
/* make sure to fall back to 80% so theres at least some gutter for older browsers */
max-height: 80%;
/* use calc to make the image the height of the relative parent minus padding */
max-height: calc(100% - 40px);
}
<div>
<div>Push<br />Push<br />Push<br />Push<br />Push<br /></div>
<img src="http://placehold.it/350x150" />
</div>
In short, this will place your image to the right of your box, give it a max-height (because positioning can do that) and a max-width (so smaller screen sizes don't freak out).
Now you could easily translate this a more general system where .box + .boxget a absolute position, or you could define a class for the box that has to push content and add that to the first box, making all other boxes absolute.
I fixed it by using JS, im using the following script:
<script type="text/javascript">
function changeheight(){
var Height = document.getElementById('box').clientHeight;
document.getElementById('imagebox').style.height = Height+'px';
}
</script>
Im working on a new website, http://blgz.co/, and for some weird reason, all my images are being squeezed!!!!!. I have spent the last few hours trying to solve the problem to no avail. Any help would be great! Thanks.
Can't figure out why you're adding the max-width declaration to your global img tag. Remove that and all your images will flow normally:
img {
height: auto;
max-width: 100%; /* remove */
}
This is because of you max-width: 100% style, you're applying to img tag. In your case it is 23px only and this is because its parent .node .field-name-field-op-main-image has float: left, this means it will act as a inline element (but won't take into account width of you image or probably you set your image width later).
In other words remove either float:left or max-width:100% and you will get the "desired" result
I'm late to this party, but I just ran into this issue myself, and simply removing max-width or not floating the parent element were not options. As a result, I had to find a real solution: just add width:auto;, e.g.:
img {
height: auto;
width: auto;
max-width: 100%;
}
That ironically worked wonderfully in every browser but Chrome 20, which then began to behave as IE8 used to. So I resorted to a CSS hack to target IE8 only:
img {
height: auto;
width: auto\0/;
max-width: 100%;
}
Now before everyone freaks out, I chose a CSS hack because I'm making this particular change in the Bootstrap CSS Framework's reset, which already uses hacks in other places. If you want to go the white-hat route, then you can simple add a conditional comment to your HTML:
<!--[if !IE 8]>
<style type="text/css">
img { width: auto; }
</style>
<![endif]-->
One more note, if you're using the hack above in a *.less file, you have to escape it or the LESS compiler will choke on it:
width: e('auto\0/');
In my case for some reason IE8 did not want to obey the explicit width: 46px; CSS.
Fix: Adding min-width: 46px; forces IE8 to render the correct width without breaking other browsers.