0

I am doing responsive work on my website and using cover image. But I am getting in '' tag, not a CSS file. So the image does not fit when I am doing responsive work.

I set the width to 100% and height to auto. But even so, the image does not fit properly.

There is space at the top and bottom. I want the image to zoom when the screen is narrow and the image is indwell to own tag without top and bottom space.

Frits
  • 7,341
  • 10
  • 42
  • 60
aalicenk
  • 13
  • 1
  • 7
  • 3
    Hi aalicenk, please include the code you're using, and it would help if you either share the actual image or at least include the image dimensions so we can reproduce your current layout. – Michael Coker May 24 '17 at 14:46
  • You should include your image like this - background-image: url(image.png); add height and width, then use background properties for zooming and etc. https://www.w3schools.com/css/css_background.asp – Giedrius May 24 '17 at 14:47
  • Hi dear friends. I'm sorry for late answer. Real image dimension is 1140x450. I using that code for img: height: auto; position: absolute; max-width: 100%. That codes is working normally for responsive but top and bottom space occurring when screen narrow. My using img will be veriable. So I dont use in CSS file. When ı try in CSS code , that is happening. But I dont want this. I want use in HTML tag in img. I looking for very answer about this issue but ı dont find. My english is weak so if ı cant tell you my problem. Thanks, for your time. – aalicenk May 25 '17 at 07:01

1 Answers1

0

you should try this code. if i understood right, this is what you are trying to do.

make image height:100% ( cover whole height of container ) ; width:auto to preserve aspect ratio of image and center the image.

see snippet or jsFiddle

.container {
  height:700px;
  width:100%;
  position:relative;
  background:red;
  overflow:hidden;
}
<div class="container">
 <img src="http://lorempixel.com/1140/450/"  height="100%" width="auto" style="position:absolute;left:50%;transform:translateX(-50%)"/>
</div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • Dear friend thank you. I solved problem by reference example you gave. The problem solved with a small code. I am using that code: `code` style="transform: scale(X, Y);" `code`. I can zooming in this way to image. The image shrinking when ı do responsive work. Thank you all of you. – aalicenk May 25 '17 at 12:13
  • well if this answer worked for you. please rate it as accepted . thanks :d – Mihai T May 25 '17 at 12:21