Hi I have an issue with the page http://nroux.com
I build it with the DIVI theme from Wordpress.
I want the pictures to be covering the full div next to the text no matter the size of the picture.
The picture shall not be deformed so it is kind of a:
min-width:100% and min-height:100% with the rest auto I guess but I tried several option that I found on stackoverflow but without success.
Could someone help me?
Thanks
.et_pb_image{
height: 100%;
width: 100%;
}
.et_pb_image img{
object-fit: cover;
width: 100%;
height: 100%;
}
Try this on css. et_pb_image is the class name which image belongs to
try something like this
<img src="image.jpg" style="width: 100%; height: 100%; object-fit: cover;">
You can try applying this css to your image container:
.container {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
And this to the image:
.container img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
max-width: initial;
}
The image might be more or less hidden, depending on the image and the text size thought.
Related
I have a background image that scales during development (running localhost). In production though, the image doesn't scale (shrink) with the screen.
.content
overflow: hidden
max-width: 100%
max-height: auto
background-image: image-url("project.jpg")
background-attachment: fixed
background-size: cover
background-position: top center
I'm wondering if its a heroku issue, or my code is messed up.
Changes may be required as per you vie code according to class/id you are using with elements.
HTML
<div id="bg">
<img src="images/bg.jpg" alt="">
</div>
CSS
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
If your problem still not rectified please see this SO answer
A shot in the dark: Why don't you try background-size: contain;?
Using background-size: contain; will show the whole image and it will resize it accordingly to fit the width and/or height of its parent container maintaining its aspect ratio as well.
This'll probably be one of the easier questions, but I just cannot seem to find the answer.
I've got the following setup:
.wrapper {
position: absolute;
top: 5%;
bottom: 5%;
left: 50%;
transform: translateX( -50%);
}
img.content {
height: 100%;
width: auto;
}
The image's width doesn't seem to change when shrinking the height of the window.
Here's a quick JSfiddle to demonstrate the issue. Adjusting the height of the window either skews or offsets the image, instead of adjusting the width accordingly.
https://jsfiddle.net/5p82ey8k/
Cheers
width + translate is maybe not the best way.
block and margin auto is less tricky:
.wrapper {
position: absolute;
top: 5%;
bottom: 5%;
left: 0;
right: 0;
}
.content {
height: 100%;
display: block;
margin: auto;
}
<div class="wrapper">
<img src="http://www.keenthemes.com/preview/conquer/assets/plugins/jcrop/demos/demo_files/image1.jpg" alt="" class="content">
</div>
https://jsfiddle.net/5p82ey8k/2/
If you want to keep the image a well <img/> you could try this style.
img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
This should preserve the ratio. However a better solution in my opinion is making the img a css background-image, and setting it's size to cover, like so:
.image {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
you could implement your picture as a background image instead of an img. and give the container this stylings.
background:url('imgurl') center center no-repeat;
background-size:cover;
this way you could set the background-size property which allows you to let the picture always covers the container or contains it
about background-size
see working fiddle.
I am wanting to keep one image in place while the background image is scalable in browser.
When I use the height: XXXpx; it will not scale correctly. I've also tried using percentages for the height.
.cbp-fwslider ul li > a img {
border: none;
display: block;
margin: 0 auto;
width: 100%;
}
.big-o {
position: absolute;
top: 360px;
margin-left: 7%;
width: 200px;
height: 358px;
}
www.georges.larsonplusyou.com
Thank you guys.
Try removing the inline style for width from your html, and then change your selector to style the image itself as follows:
.big-o img {
position: absolute;
top: 360px;
margin-left: 7%;
max-width: 100%
width: auto;
height: auto;
}
This worked in my browser, but I would suggest using media-queries for responsive design. I think you need to do a width: auto\9; if the webpage will be used in Internet Explorer because there's a bug.
I'm trying to stretch content div to 100% height:
http://new.art-frame.spb.ru/catalog
content DIV:
<div id="rt-transition">...</div>
footer:
<footer id="rt-footer-surround">...</footer>
The problem is, I can't change html layout, only CSS.
(the best way is to use Firebug/Chrome inspector to see what's all about)
html {
position: relative;
min-height: 100%;
height: auto;
margin: 0;
}
body {
margin: 0 0 100px;
min-width: 100px !important;
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Try changing the height of the html to 100% instead of auto. Then, play around with the CSS of all the elements inside to make it fit. If there is excess overflow, use
body { overflow: hidden; }
To solve the problem, although this won't allow for scrolling.
Set:
min-height: 720px;
on your rt-main
UPDATE 2: Making further progress. Almost there!
jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/6/
The sprite is now 99% responsive, except that the
margin-bottom: %
Does not line up perfectly as the page changes width. The
margin-left: %
Seems to work great.
Any thoughts on how to align the margin-bottom perfectly?
UPDATE: Making progress, but still not yet there.
Below is the jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/5/
The sprite image that I wanted to crop is working responsively, except it is only being cropped horizontally and not vertically.
The Code below:
<div class="responsive-sprite" style="width: 100%;">
<img alt="Yay for alt tags..." src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" />
</div>
img {
width: 100%;
height: 200%;
margin-left: -81.869%;
}
.responsive-sprite {
overflow: hidden;
}
Can anyone think of a way to crop this vertically as well?
Below is the original post:
Is there a way to make CSS sprites responsive?
Take a look at the attached jsFiddle: http://jsfiddle.net/persianturtle/Tfemm/2/
Is there a way to resize this CSS sprite once the container can no longer fit the full size image?
<div class="container">
<h2 class="popular"><img src="http://zx85.dyndns.org/raphtest/img/nav-buttons2.jpg" alt="" />Featured</h2>
</div>
.container {
width: 20%;
margin: 0 auto;
}
h2 {
overflow: hidden;
position: relative;
height: 128px;
width: 192px;
max-width: 100%;
}
h2 img {
position: relative;
}
h2.popular img {
top: 0;
left: -867px;
}
h2.popular img:hover {
top: -128px;
left: -867px;
}
Hmmm. Tricky.
I haven't tested but would it work to orient the sprite horizontally instead of vertically and then:
h2 {
overflow: hidden;
position: relative;
width: 192px;
max-width: 100%;
}
h2 img {
position: relative;
width: 200%;
}
h2.popular img {
top: 0;
left: 0;
}
h2.popular:hover img {
top: 0;
left: -100%;
}
Edit:
Seems to work, the sprite just needs to be configured. Have a look at this JSFiddle.
Unfortunately, I think you will have to do each button individually because the image height is what determines the button height when it is resized.