All the images that are not background images are not becoming responsive!
Tried max-width, images like the logo, mouse cursor are noot responsive
<header class=" bg-img bg-image-full">
<img class = "img-fluid"src="h_img.jpg">
</header>
<div class="container-fluid">
<img class="logo" src="logo.png" >
</div>
<div class="hero-text">
<br>
<h1 style="font-size:49px">WELCOME</h1>
<h2>TO DELANI STUDIOS</h2>
<h5>Amazing people are making amazing designs</h5>
</div>
<div>
<img class="mouse" src="mouse_click.png">
</div>
This is the css
.bg-img {
background-image: url("hero.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
margin-bottom: 500px;
max-width: 100%;
}
.logo {
position: relative;
margin-top: -2100px;
margin-left: 630px;
max-width: 5%;
height: auto !important;
}
.mouse {
position: relative;
margin-top: -1200px;
margin-left: 670px;
max-width: 100%;
height: auto !important;
}
Images to be responsive
Check object-fit property for images: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit. However, note that it's not supported by some older browsers.
Try using:
img {
max-width: 100%;
height: auto;
}
Related
I am trying to create a slideshow embedded inside a smartphone image for my website in the below URL link but the images are not fitted accurately.
so please help out to solve this issue
images inside the slider not fitted into the smartphone screen i.e width and height, can we make the images scroll inside the smartphone accurately display
url link of website
.dm-width {
width: 350px;
margin: 75px;
}
.iphone-mockup {
position: relative;
z-index: 5;
}
.dm-device {
position: relative;
width: 100%;
padding-bottom:203.477897%;
margin-bottom: 20px;
}
.device {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
-webkit-background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(https://res.cloudinary.com/di5yipnns/image/upload/v1482236588/apple-iphone_aivldo.png);
background-size: cover;
background-position: center center;
}
.screen {
overflow: hidden;
position: absolute;
top: 18.1%;
bottom: 20.6%;
left: 12.49%;
right: 17.4%;
background-color: #E91E63;
}
.slider {
height: 100%;
}
.slider div {
height: 119%;
padding: 30px;
}
.slider__item {
font-size: 100px;
color: rgba(255,255,255,0.7);
display: flex;
justify-content: center;
align-items: center;
}
.slider__item--2 {
background-color: #2196F3;
}
.slider__item--3 {
background-color: #4CAF50;
}
.slider__item--4 {
background-color: #FFC107;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js'></script>
<div class="dm-width">
<div class="dm-device">
<div class="device">
<div class="screen">
<div class="slider">
<div class="slider__item slider__item--1">
<img src="inc/img/new_2.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--2">
<img src="inc/img/new_1.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--3">
<img src="inc/img/new_3.jpg" alt="app download" >
</div>
<div class="slider__item slider__item--4">
<img src="inc/img/new_4.jpg" alt="app download" >
</div>
</div>
</div>
</div>
</div>
</div>
I have a div with an image background (in React with Next.js, but that shouldn't matter).
import styles from './my-component.module.css';
import Background from '../../../public/assets/images/background-image.png';
// later
<div
style={{ backgroundImage: `url(${Background})` }}
className={`${styles['background-image']}`}
>
Here is the CSS I'm currently using:
.background-image {
border-radius: 8px;
background-size: cover;
background-repeat: no-repeat;
height: auto;
}
I can't get the image to take the full height. It should always take the display's width, but take as much height as it can without stretching or repeating. How can I do that?
Update: Yes, the container has more height than the element.
Update 2 Viira's solution almost works, but the image doesn't respect padding on the right side.
Maybe this can help.
Don't set it in background image try insert it in img tag
*{box-sizing: border-box;}
body {
margin: 0;
}
.background-image {
border-radius: 8px;
background-size: cover;
background-repeat: no-repeat;
height: auto;
}
.container {
display: table;
width: 100%;
}
.img {
display: table-cell;
width: 100%;
position: absolute;
z-index: -1;
}
.img img {
width: 100%;
}
.text {
display: table-cell;
padding: 30px;
width: 100%;
}
<div class="background-image">
<div class="container">
<div class="img">
<img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg">
</div>
<div class="text">
<h1>Are you ready</h1>
<p>Click the link</p>
<button>Click Here</button>
</div>
</div>
</div>
NOTE: The image is stretched to full width because its resolution is low. you can set it's width to auto to display its original size.
Solution 2:
As the OP mentioned, padding is not respected by the image. I came up with a solution. Since the .container div is in display: table; padding isn't allowed there. So, by giving the padding to its parent .background-image this issue will be lifted.
*{box-sizing: border-box;}
body {
margin: 0;
}
.background-image {
border-radius: 8px;
padding: 15px 40px;
}
.container {
display: table;
width: 100%;
max-width: 100%;
position: relative;
}
.img {
display: table-cell;
width: 100%;
position: absolute;
z-index: -1;
}
.img img {
width: 100%;
}
.text {
display: table-cell;
padding: 30px;
width: 100%;
}
<div class="background-image">
<div class="container">
<div class="img">
<img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-260nw-789676552.jpg">
</div>
<div class="text">
<h1>Are you ready</h1>
<p>Click the link</p>
<button>Click Here</button>
</div>
</div>
</div>
Set padding for .background-image div so that the padding will apply.
So you want your image to determine the height of your div. That is not possible when using the image as background.
You need to load image into dom as an element which can then be used to determine the height of your div, if you want to show some content on top of the image in this case, you will have to overlay it on top of the image.
Here's a sample html structure you can use to achieve this
<div style="position:relative">
<img src="https://images.unsplash.com/photo-1573496528816-a104a722b3db?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" style="width:100%; height: auto;" />
<div style="position:absolute; top: 0; left: 0; width: 100%; height: 100%">
// YOUR CONTENT
</div>
</div>
Here is how I ended up solving it:
import PropTypes from 'prop-types';
import React from 'react';
import styles from './background-image-card.module.css';
function BackgroundImageCard({ alt, children, className, image }) {
return (
<div className={`${className} ${styles.container}`}>
<div className={styles.overlay} />
<img alt={alt} src={image} className={styles['background-image']} />
<div className={styles.content}>{children}</div>
</div>
);
}
BackgroundImageCard.propTypes = {
alt: PropTypes.string,
children: PropTypes.node,
className: PropTypes.string,
image: PropTypes.string,
};
export default BackgroundImageCard;
.container {
align-items: center;
display: flex;
justify-content: center;
position: relative;
width: 100%;
}
.overlay {
background: var(--gray-800);
border-radius: 8px;
height: 100%;
opacity: 0.8;
position: absolute;
width: 100%;
}
.background-image {
border-radius: 8px;
height: auto;
width: 100%;
z-index: -1;
}
.content {
position: absolute;
}
I'm creating a simple web page using React.
I have an outer div with an <img /> tag and a <div /> tag with other divs and things like that inside of it.
The <img /> doesn't resize (so if I zoom in and out, it just stays the same size really). The <div /> tag does (the resizing gets kind of weird when I zoom in past 90% though).
I'm just curious as to why this is happening? There are 3 images within the <div /> and text overlaying each image. Then the <img /> tag is really just more of a large logo. Any advice? Beneath is the JSX
<div className='container'>
<img src="logo.png" alt='Logo Large' className='logo' />
<div className='container1'>
<div alt='cc' className='container2'>
<div className='cc'>
asd
</div>
</div>
<div alt='cc1' className='container3'>
<div className='cc1'>
asdddd
</div>
</div>
<div alt='cc2' className='container4'>
<div className='cc2'>
123124
</div>
</div>
</div>
</div>
Beneath this is the related CSS
html,
body,
#app {
height: 100%;
width: 100%;
}
body {
background: #2aa9e0;
user-select: none;
color: #fff;
overflow: hidden;
font-family: 'Courier New';
}
.container {
display: flex;
align-items: center;
height: 97%;
width: 100%;
}
.container1 {
display: flex;
flex-direction: column;
align-items: inherit;
height: 80%;
width: 50%;
}
.container1 .container2 {
background-image: url("...");
width: 628px;
height: 324px;
position: relative;
}
.container1 .container2 .cc {
font-size: 52px;
position: absolute;
width: 100%;
text-align: center;
top: 15%;
}
.container1 .container3 {
background-image: url("...");
width: 213px;
height: 139px;
position: relative;
}
.container1 .container3 .cc1 {
font-size: 52px;
position: absolute;
width: 100%;
text-align: center;
top: 30%;
}
.container1 .container4 {
background-image: url("...");
width: 628px;
height: 336px;
position: relative;
}
.container1 .container4 .cc2 {
font-size: 52px;
position: absolute;
width: 100%;
text-align: center;
bottom: 15%;
}
.container .logo {
height: 70%;
width: 50%;
}
Any help would be greatly appreciated. I started using flexbox in the beginning, but kind of moved away from it to get everything properly aligned and organized in container1
The <img /> doesnt resize, since its width is set to 50% of the WIDTH of the surrounding container. The container keeps its width on zoom in/out, so the logo does as well.
If you want the logo to change its size on zoom in/out, you could use sth like:
.container .logo {
width: 25em;
}
This way its using a width relative to pixel size (1em = 16px)
I have 2 images, I have to display one image on the other image.I need to display the 2 images like below exactly.
The following is the code which I have tried, its not coming prperly.can any one please help me to fis this issue?
.my_banner{
background-image: url('http://i.stack.imgur.com/E4s7Z.gif');
background-repeat: no-repeat;
position:absolute;
top: 0px;
left: 150px;
width: 100%;
height: 100%;
z-index: 100;
}
<div>
<img class="my_banner"></img>
<img src="http://i.stack.imgur.com/rQ8Ku.jpg" width="100%" height="100%"></img>
</div>
You may use position: absoulute; and adjust the top and left to fit it.
.block {
position: relative;
}
.overlap {
position: absolute;
width: auto;
height: 60%;
top: 15%;
left: 13%;
z-index: 100;
}
<div class="block">
<img src="http://i.stack.imgur.com/rQ8Ku.jpg" width="100%" height="100%" />
<img class="overlap" src="http://i.stack.imgur.com/E4s7Z.gif" />
</div>
Try this https://jsfiddle.net/2Lzo9vfc/8/
HTML
<div class="banner">
<img src='http://i.stack.imgur.com/E4s7Z.gif' alt="">
</div>
CSS
.banner {
background: url('http://i.stack.imgur.com/rQ8Ku.jpg');
background-size: 100% auto;
background-position: top center;
position: relative;
background-repeat: no-repeat;
height: 200px;
}
.banner img {
left: 12%;
position: absolute;
width: 12%;
}
In my web I have some divs. The first and the top one is my menu bar and below that one I have another div. The second div contain photo change and below him a div with some text. When I running my code the photos(which locate in the second div) cover all the divs (although the menu bar position is "fixed"). I think that the problem is somewhere in the css file. can someone help me?
Here is my code:
<div id="header">
<div id="nav_bar">
<ul>
<li>בית</li>
<li>אודות</li>
<li>עבודות</li>
<li>פרוייקטים</li>
<li>חיפויי קירות</li>
<li>צרו קשר</li>
</ul>
</div>
</div>
<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">
<p>1</p>
</div>
<div id="main_photo2" class="phocont">
<p>2</p>
</div>
<div id="main_photo3" class="phocont">
<p>3</p>
</div>
<div id="main_photo4" class="phocont">
<p>4</p>
</div>
<div id="main_photo5" class="phocont">
<p>5</p>
</div>
here is my css code:
#main_pics {
width: 100%;
height: 100%;
position:relative;
}
.phocont {
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
text-align:center;
}
.phocont p {
margin-top:30%;
font-size:60pt;
color:#fff;
text-shadow: 0 0 2px #000;
}
.first {
z-index:9999;
}
#image{
overflow: hidden;
background-size: cover;
background-position: center;
}
#main_photo1{
width: 100%;
height: 100%;
background-image: url("1.jpg");
background-position: center center;
background-size: cover;
}
#main_photo2{
width: 100%;
height: 500px;
background-image: url("2.jpg");
background-position: center center;
background-size: cover;
}
#main_photo3{
width: 100%;
height: 500px;
background-image: url("3.jpg");
background-position: center center;
background-size: cover;
}
.container{
width: 100%;
height: 500px;
background-color: white;
}
jsFIDDLE
Try this JSFIDDLE as an example. You need to specify a height for your fixed header and give it the property top:0 in order to keep it fixed at the top. this will also remove the fixed element from the flow of your page so you will have to give your photo div a top margin to position it below the header. I'm not sure about the text you have after the photos as you did not provide the information needed.
EDIT
After reviewing your recent comment you should change main_pics to this:
#main_pics {
width: 100%;
height: 500px;
position:relative;
margin-top:55px;
z-index:1;
}
and also add z-index:2; to #nav_bar