根据窗口大小更改/调整图像的大小 [英] changing/ resizing the image according to the window size

问题描述

我想做一些类似YouTube标头的内容。当窗口宽度减小时，其徽标会发生变化，并消除右侧的两个菜单图标。

codepen.io

$ b

  function adjustImage（） {
 if（$（window）.width（）<= 600）{
 $（'＃logoDiv'）。css（{width：30px，float：right }）; （$（window）.width（）> 600）{
 $（'＃logoDiv'）。css（{width：165px，backgroundColor ：red}）; } 
} 
  - 这只是链接代码的一部分 -  
  

请点击链接查看我编写的代码。它也似乎像JQuery代码不工作，我不知道为什么

解决方案

jquery方式： -

这可以通过 CSS 本身的媒体查询轻松实现，但似乎您需要使用jquery方式。所以以jquery方式回答

为这两个宽度添加单独的类并在这些类之间切换，同时通过像 $（'＃logoDiv'）调整大小。removeClass （桌面）; $（'＃logoDiv'）.addClass（mobile）;

检查此小提琴

纯CSS方式：

这可以通过css本身的媒体查询轻松实现

检查小提琴

I want to do something like YouTube header. When the width of the window reduces, its logo changes and gets rid of two of the menu icons on the right.

codepen.io

function adjustImage(){
if($(window).width() <= 600) {
    $('#logoDiv').css({"width": "30px", "float": "right"}); }

if($(window).width() > 600) {
    $('#logoDiv').css({"width": "165px", "backgroundColor": "red"});    }
}
--this is just a part of the code from the link--

please follow the link to see the code that I've written. It also seems like JQuery code is not working and I have no idea why

解决方案

Jquery way:-

this can be achieved easily in media query in CSS itself, but it seems you need in jquery way. so answering in jquery way

add separate class for both widths and toggle between these classes while resize by like $('#logoDiv').removeClass("desktop"); $('#logoDiv').addClass("mobile");

Check this fiddle

Pure CSS way:-

this can be achieved easily in media query in css itself

Check this fiddle

这篇关于根据窗口大小更改/调整图像的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！