CODEWITHSUNDEEP
htmlcsswordpress
A. Dubosky
A. Dubosky

Reputation: 53

Header image resize

I need some help , when i resize the windows the image don't resize with good height or width ,i'am using WordPress theme twenty seven and i use the follow code to reduce height and remove amination ,of header image in twenty seventeen theme. pic related

.has-header-image .custom-header-media img, 
.has-header-video .custom-header-media video, 
.has-header-video .custom-header-media iframe, 
.has-header-image:not(.twentyseventeen-front-page):not(.home) 
.custom-header-media img {
height: 66% !important;
object-fit: fill !important;
width: 100%;
max-height: 100% !important;
display: block !important;
position: relative !important;
}

#wp-custom-header {
height: 100% !important;
}

with object-fit: contain !important; enter image description here

Upvotes: 1

Views: 2887

Answers (2)

jukerok
jukerok

Reputation: 357

You can safely set the images to a min-width and min-height using pixels like

img{
    max-width: 420px !important;
    max-height: 270px !important; 
    width:100%
    display: block !important; 
    position: relative !important; 
   }

To make the image resize you could use bootstrap by adding the following lines in between the head tags and add the class img-responsive to the intended image.

(SINCE YOU ARE USING WORDPRESS YOU WONT BE NEEDING THE BELOW AS WP ALREADY INCLUDES BOOTSTRAP)

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Those links were copied from https://www.w3schools.com/bootstrap/bootstrap_get_started.asp , you will also find a very good tutorial on how to use bootstrap there.

And to answer the comment you have added, please use the following css code and remove the tag from the html code in div class="wp-custom-header" and instead use the following css code

.wp-custom-header{
 background-image: url('http://web.ipca.pt/poliempreende/wp-
 content/uploads/2017/05/Logo-IPCA-Poliempreende.png');
 background-repeat:no-repeat;
 background-size: 'find out which size you want';
 }

Upvotes: 2

Ricky Dam
Ricky Dam

Reputation: 1895

height: 66% !important;

The set height value is what distorts your header image.

EDIT: Try object-fit: contain !important; and tell me whether or not it works.

EDIT_2: Remove any height you have set on your img and the gray should disappear.

EDIT_3: Tell me how it goes and mark this answer as correct if I have helped you and it will help others having the same problem too.

One

Get rid of the height you have set on the image. 

#wp-custom-header > img {
  height: auto !important;
}

Two

Remove the extra space.

.custom-header {
  height: 25vw !important;
}

Three

Upvotes: 1

Related Questions